WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

Sassを使ってレスポンシブサイトをコーディングしてみる

sass

f:id:yachin29:20190815141115j:plain


素材
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;
    }
}

/* pcレイアウト */
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;
}