素材
http://school.yachin29.com/0815test.zip
レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。
またブレイクポイントやメインのカラーコードを変数化する事で効率化が図れます。
さらに、今回はmarginやpaddingの値を8pxの倍数に設定します。
変数の設定
$point-tablet: 959px;
$point-sp: 767px;
mixinの使い方
@mixin 名前 {
@media (max-width:$point-tablet) {
@content;
}
}
@mixin sp {
@media (max-width:$point-sp) {
@content;
}
}
body {
background: #222;
@include tablet {
background: #f00;
}
@include sp {
background: #df9e3d;
}
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THAI-NAMA|SASSを使ったコーディング</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<h1>THAI-NAMA</h1>
<nav class="g-nav">
<ul>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div class="main-visual">
<img src="img/main.jpg" alt="">
</div>
<p class="main-copy">THAI-NAMAは<br>
タイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>
<ul class="food">
<li><img src="img/sub1.jpg" alt=""></li>
<li><img src="img/sub2.jpg" alt=""></li>
<li><img src="img/sub3.jpg" alt=""></li>
</ul>
<div class="news">
<h2>NEWS</h2>
<dl>
<dt>2020/03/03</dt>
<dd>春のメニューを追加しました</dd>
</dl>
</div>
<footer>
<ul class="footer-nav">
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="footer-wrapper">
<div class="footer-info">
<p class="tel"><a href="tel:03-1234-4567">03-1234-4567</a></p>
<p class="mail">reservation@thai-nama.net</p>
</div>
<div class="footer-address">
<p class="address-txt">〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F</p>
<p class="jr">JR渋谷駅徒歩5分</p>
<p class="jr"></p>JR原宿駅徒歩6分</p>
<p class="subway">副都心線、千代田線明治神宮前徒歩7分</p>
</div><!-- /.footer-address -->
</div><!-- /.footer-wrapper -->
<p class="copy-right"><small>Copyright 2020 THAI-NAMA</small></p>
</footer>
</body>
</html>
style.scss
@import "_reset.scss";
//変数セット
$main-color:#c94343;
$footer-color:#60911d;
$unit:8px;
$point-tablet: 979px;
$point-sp-l:640px;
$point-sp-s:480px;
//mixinセット
@mixin tablet {
@media (max-width:$point-tablet) {
@content;
}
}
@mixin sp-l {
@media (max-width:$point-sp-l) {
@content;
}
}
@mixin sp-s {
@media (max-width:$point-sp-s) {
@content;
}
}
header{
width: 100%;
border-bottom: 4px solid $main-color;
}
.inner{
max-width: 980px;
margin: 0 auto;
display: flex;
justify-content: space-between;
@include tablet{
display: block;
}
}
h1{
width: 280px;
height: 42px;
margin: 10px 0;
background: url(../img/logo.png)no-repeat;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
@include tablet{
margin: 10px auto;
}
}
.g-nav{
align-self:flex-end;
}
.g-nav>ul{
display: flex;
@include tablet{
justify-content: center;
}
}
.g-nav li{
margin: 0 10px;
@include sp-s{
width: 25%;
margin: 0;
&:nth-of-type(-n+3)>a{
border-right: 1px solid $main-color;
}
}
}
.g-nav a{
display: block;
padding: 10px 20px;
color: $main-color;
@include sp-s{
padding: 10px 0;
font-size: 14px;
text-align: center;
}
&:hover{
color:#907f7f;
}
}
.main-visual{
max-width: 980px;
margin: 0 auto $unit*10;
&>img{
max-width: 100%;
}
}
.main-copy{
text-align: center;
line-height: 1.8;
margin-bottom: $unit*7;
padding: 0 $unit;
box-sizing: border-box;
}
.food{
max-width: 980px;
margin: 0 auto $unit*10;
display: flex;
justify-content: space-between;
@include sp-l{
display: block;
text-align: center;
&>li{
margin-bottom: $unit*2;
}
}
& img{
max-width: 100%;
}
&>li:hover{
opacity: 0.7;
}
}
.news{
max-width: 980px;
margin: 0 auto $unit*14;
@include tablet{
padding: 0 $unit*2;
}
&>h2{
margin-bottom: $unit;
}
& dt{
float: left;
border-left: $unit*2 solid $main-color;
padding-left: $unit*2;
}
& dd{
padding-left: $unit*20;
}
}
footer{
background: $footer-color;
color: #FFF;
}
.footer-nav{
display: flex;
justify-content: center;
margin-bottom: $unit*4;
&>li{
margin: 0 $unit*3;
@include sp-l{
margin: 0;
width: 25%;
}
&>a{
display: block;
padding: $unit*2;
color: #FFF;
@include sp-l{
padding: $unit*2 0;
text-align: center;
font-size: 14px;
}
&:hover{
text-decoration: underline;
}
}
}
}
.footer-wrapper{
max-width: 980px;
margin: 0 auto;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #FFF;
padding-bottom: $unit*3;
@include sp-l{
display: block;
}
&>div{
width: 48%;
@include sp-l{
width: 90%;
margin: 0 auto $unit*2;
font-size: 14px;
}
& a{
color: #FFF;
}
}
}
.copy-right{
text-align: center;
padding: $unit*4 0;
}
