webサイト制作の勉強|2019年3月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

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

<header>
<div class="header-inner">
<h1><img src="img/logo.png" alt=""></h1>
<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<div class="key-visual">
<img src="img/main.jpg" alt="">
<h2>旬の素材を楽しむ</h2>
<p>THAI-NAMAはタイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>
</div>


<div class="wrapper">
<p class="food"><img src="img/sub1.jpg" alt=""></p>
<p class="food"><img src="img/sub2.jpg" alt=""></p>
<p class="food"><img src="img/sub3.jpg" alt=""></p>
</div>

<h3>NEWS</h3>
<dl class="news">
<dt>2019/08/15</dt>
<dd>夏季休暇のお知らせ。</dd>
<dt>2019/08/10</dt>
<dd>夏のカレー・フェアを開催中。</dd>
<dt>2019/07/12</dt>
<dd>夏のメニューを追加しました。</dd>
</dl>
</div>
<footer>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="footer-inner">
<div class="info">
<p class="tel">03-1234-4567</p>
<p class="mail">reservation@thai-nama.net</p>
</div>
<div class="address">
<p>〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F</p>
<p>JR渋谷駅徒歩5分|JR原宿駅徒歩6分</p>
<p>副都心線、千代田線・明治神宮前徒歩7分</p>
</div>
</div>
<p class="copy"><small>Copyright 2019 THAI-NAMA</small></p>
</footer>


style.scss

@import "_reset.scss";
a {
  color: #222;
}
//変数セット
$main-color:#c94343;
$footer-color:#60911d;
$unit:8px;
$point-tablet: 959px;
$point-sp: 500px;


//mixinセット
@mixin tablet {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}
//レイアウト
header {
  width: 100%;
  border-bottom:4px solid $main-color;
}
.header-inner {
  max-width: $unit*120;
  padding: $unit*2 0 $unit;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  @include tablet {
    display:block;
    h1 {
      text-align: center;
    }
  }
  img {
    max-width: 100%;
  }
}
.g-nav ul {
  display: flex;
  justify-content: space-between;
  li {
    margin: 0 $unit*2;
    @include sp{
      width: 25%;
      margin: 0;
    }
    a {
      display: block;
      font-weight: bold;
      padding: $unit*3;
      @include tablet {
        padding: $unit*1.5;
        font-size: 14px;
      }
      @include sp {
        padding:$unit*2 0;
        text-align: center;
      }
      &:hover {
        color:$main-color;
      }
    }
  }
}
.main {
  max-width: $unit*120;
  margin: 0 auto $unit*10;
  padding-top:$unit*3; 
  img {
    max-width: 100%;
  }
}

.key-visual{
  margin-bottom: $unit*6;
  text-align: center;
  h2 {
    font-size: 28px;
    margin:$unit*6 0 $unit*2;
  }
  p {
    padding: 0 $unit*5;
    line-height: 1.8;
    margin-bottom: $unit*3;
  }
}
.wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: $unit*8;
  @include sp {
    display:block;
    text-align: center;
  }
}
h3 {
  border-left: 20px solid $main-color;
  padding-left: $unit*3;
  margin-bottom: $unit*3;
  @include tablet{
    margin-left: $unit*2;
  }
}
dl {
  @include tablet{
    padding-left: $unit*2;
  }
}
.news dt {
  float: left;
  margin-bottom: $unit*1;
}
.news dd {
  padding-left: 8em;
  margin-bottom: $unit*1;
  text-decoration: underline;
  @include sp{
    padding:0 1em 0 7em;
  }
}
footer {
  background: $footer-color;
  color: #FFF;
  ul {
    padding-top:$unit*2;
    margin-bottom: $unit*4;
    display: flex;
    justify-content: center;
    li {
      border-right: 1px solid #FFF;
      @include sp{
        width: 25%;
        border-right:0;
        &:nth-of-type(-n+3) {
          border-right: 1px solid #FFF;
        }
      }
      &>a {
        display: block;
        text-align: center;
        font-weight: bold;
        padding: $unit*1 $unit*3;
        color: #FFF;
        @include sp{
          padding: $unit*1 0;
          font-size: 14px;
          font-weight: normal;
        }
        &:hover {
          text-decoration: underline;
        }
      }
    }
    li:first-of-type {
      border-left:1px solid #FFF;
      @include sp{
        border-left:0;
      }
    }
  }
}
.footer-inner {
  max-width: $unit*120;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  @include tablet{
    display:block;
    padding-left: $unit*2;
  }
  p {
    margin-bottom: $unit*1;
    i{
      font-size: $unit*3;
      margin-right: $unit*1; 
    }
  }
}
.copy {
    text-align: center;
    padding: $unit*3 0;
  }