Webデザイン・マーケティング課 授業33日目

1〜3時間目 レスポンシブwebデザイン
オリジナル教材

サンプルサイトを作っていく。

今日は、全体のテキストの設定と、ヘッダーの作成の途中まで。

■header部分のHTMLを書く

<header>
   <div class="inner">
       <h1 class="logo"><a href="#"><img src="img/logo.png" alt="洋菓子店CHALON"></a></h1>
       <div class="menu_btn">
           <span></span>
           <span></span>
           <span></span>
       </div>
       <nav>
           <ul class="menu_body">
               <li><a href="#">当店について</a></li>
               <li><a href="#">メニュー</a></li>
               <li>
                   <a href="#">お菓子教室</a>
                   <ul>
                       <li><a href="#">ご参加の流れ</a></li>
                       <li><a href="#">参加者の声</a></li>
                       <li><a href="#">お申込み</a></li>
                   </ul>
               </li>
           </ul>
       </nav>
   </div>
</header>

ここまで書けたら、ひとまずcssでハンバーガーメニューを作っていく。

■全体のテキストの設定をcssで作る

html {
   font-size: 62.5%;
}


body {
   font-size: 1.6rem;
   font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   line-height: 2;
   color: #333;
}

htmlのfont-sizeを62.5%に設定する。こうすると、多くのブラウザでhtmlタグの文字の大きさが10px相当になる。

その後bodyタグのfont-sizeに1.6remを設定することで、bodyタグのfont-sizeを16pxにする。この書き方にすることで、font-sizeに絶対的な数値にすることなく設定できる。

■CSSでハンバーガーボタンを作る

header {
   padding-top: 20px;
}

header .inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header nav {
   display: none;
}

header .menu_btn {
   width: 24px;
   height: 24px;
}

header .menu_btn span {
   display: block;
   height: 2px;
   width: 100%;
   background-color: #333;
   transition: 0.3s;
}

header .menu_btn span:nth-child(2) {
   transform: translateY(9px);
}

header .menu_btn span:nth-child(3) {
   transform: translateY(18px);
}

header.on .menu_btn span:nth-child(1) {
   transform: translateY(11px) rotate(45deg);
}

header.on .menu_btn span:nth-child(2) {
   display: none;
}

header.on .menu_btn span:nth-child(3) {
   transform: translateY(9px) rotate(-45deg);
}

一旦navタグを非表示にしてから進めます。（navタグは、明日に完成させる予定です）

まず、spanタグを使ってハンバーガーメニューを作ります。背景色を黒にして、高さを2px、横幅を100%（今回は24px）にして作ります。

header .menu_btn {
   width: 24px;
   height: 24px;
}

header .menu_btn span {
   display: block;
   height: 2px;
   width: 100%;
   background-color: #333;
   transition: 0.3s;
}

そのspanをtransformで移動して3本線を作ります。

header .menu_btn span:nth-child(2) {
   transform: translateY(9px);
}

header .menu_btn span:nth-child(3) {
   transform: translateY(18px);
}

これで3本線が出来上がります。

次に、headerタグにクラスonをつけた時にxになる様に作ります。

header.on .menu_btn span:nth-child(1) {
   transform: translateY(11px) rotate(45deg);
}

header.on .menu_btn span:nth-child(2) {
   display: none;
}

header.on .menu_btn span:nth-child(3) {
   transform: translateY(9px) rotate(-45deg);
}

真ん中のspanを非表示にして、1番目と3番目のspanの位置を同じにして角度を45度ずらします。

こうすることでxになります。

■jsでheaderタグにクラスonをつけたり外したりする

あとは、クラスonをつけたり外したりします。

//.menu_btnをクリックしたら
$('.menu_btn').on('click', () => {
   //headerタグに、.onをつけたり消したりしたい
   $('header').toggleClass('on');
});

スクリプト自体はとてもシンプルですね。

.menu_btnをクリック（タップ）するたびに、headeタグにクラスonをつけたり外したりします。

■まとめ

ひとまず今日は、ハンバーガーメニューのボタンの部分を作りました。scriptがやっているのは、あくまでクラスをつけたり外したりしているだけで、アニメーションはcssに任せているのがちょっとポイントです。