「レスポンシブ」ヘッダーを作る Part2【CSS編】

前回の記事はこちら≫「レスポンシブ」ヘッダーを作る Part1【HTML編】

今回は2回目、CSSでレスポンシブヘッダーのデザイン部分。

正直CSSができるようになれば、めちゃくちゃオシャレなヘッダーも作れちゃうんで頑張っていきましょう。

さて、最初にCSSを作る前の準備をしていきます。

前回作った「Header」フォルダのなかに「css」フォルダを作りましょう。そしてcssフォルダのなかに「master.css」というファイルを作成します。

※フォルダ階層

Header/
├ index.html
└ css/
　└ master.css

そしたらindex.htmlファイルをひらいて「title」タグの上に次のコードを書いていこう。

はい、これで準備はOK。さっそくmaster.cssファイルを開いてやっていきましょう。

First Step: CSSのスタイルデザインをリセットしよう

/* Reset style */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fafafa;
  list-style: none;
  text-decoration: none;
}

最初にやることはCSSのスタイルをリセット。

リセットしないと…

• 変な空白が入ったり
• 残念な見た目になる

だからリセットすることは重要。

まあ最低限、絶対にリセットしなきゃいけないのは次の3つです。あとは好みでリセットしちゃってください。今回は上記のリセットスタイルでやっていきます。

  margin: 0;
  padding: 0;
  box-sizing: border-box;

「*」はすべてのタグに適用してねってこと。

Next Step: ヘッダーの土台を作っていこう

/* Normal header style */
.header_bg {
  background: #323232;
  width: 100%;
  height: 80px;
}

ここでは、ヘッダーの枠の部分を作っていきます。まあ、前回の動画でいえば黒い部分全体ってとこです。

Width(幅)の100%はコンテンツの最大幅。たとえば親要素が300pxの幅しかなかったら300pxしか大きくなりません。

今回は親要素がbodyなのでディスプレイのサイズに自動で変更されます。

• 背景色が#323232、まあ黒に近い色
• ヘッダーの幅をここでは、ディスプレイのサイズ分
• ヘッダーの高さを80pxに設定

Next Step: ヘッダーのタイトルを作っていこう

.header_contents {
  width: 100%;
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_contents h1 {
  font-size: 22px;
  margin: 0 0 0 40px;
}

次にヘッダーの中にあるヘッダータイトルとヘッダーコンテンツの幅を決めていきましょう。

ヘッダータイトルもナビゲーションも全てこのheader_contentsの中に入ります。

• header_contents…コンテンツの幅をメインで決める
• コンテンツ幅は最大で1024px、それ以上は大きくならず1024pxで維持
• コンテンツ幅が1024px以下ならディスプレイのサイズに100%で表示
• display: flex→align-items: centerでコンテンツが自動で上下をあわせる
• display: flex→justify-content: space-between;でコンテンツ1024px内で自動で左右の端に

ちなみに…

  display: flex;
  justify-content: space-between;
  align-items: center;

この3つの組み合わせは、めっちゃ使うので覚えておくとCSSデザインがスムーズにいきます。

Next Step: ヘッダーのナビゲーションを作っていこう

.header_nav_lists {
  display: flex;
}

.header_nav_lists li {
  margin: 0 40px 0 0;
}

.nav_link {
  font-size: 18px;
}

はい、つぎはナビゲーション部分を作っていきましょう。display: flexもう一回でてきましたね。flexについて簡単に説明すると…

※flexとは？
簡単にいえばBlock要素を横並びにしてくれるかんじです。display: flexを使った状態で、flex-directionを設定すればたて並びや逆から表示するように指定可能。

というかんじです。

• display: flexのみ指定なのはさっき上下左右調整してあるから
• .header_nav_lists li…リストの左右を調整

Next Step: ハンバーガーメニューを作っていこう

/* Responsive menu button */
.responsive_btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 40px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.menu_line {
  background: #fafafa;
  border-radius: 5px;
  width: 100%;
  height: 5px;
  margin: 4px 0;
}

というわけで、ここからハンバーガーボタンです。ちなみにここままだと、ハンバーガーボタンは表示されません。

えっ、て？はい、じゃあdisplay: noneの部分をdisplay: flexに変更しましょう。どうですか？表示されましたよね。

これは今、表示してもジャマなのでdisplay: noneで非表示にしておきましょう。次のステップでdisplay: flexの処理をしていきます。

• .responsive_btn…ハンバーガーボタンの大きさを設定
• display: noneで非表示、ディスプレイ幅が小さくなれば表示させる
• .menu_line…ハンバーガーボタンが表示される線を設定
• ハンバーガーボタンは.responsive_btnの大きさを変えれば線の長さも変更可能

Next Step: レスポンシブメニューを作っていこう

/* Responsive style */
@media screen and (max-width: 768px) {
  .responsive_btn {
    display: flex;
  }

  .header_bg {
    position: relative;
  }

  .header_nav {
    background: #323232;
    width: 100%;
    height: 100vh;
    padding: 80px 0 0 0;
    position: fixed;
    top: 0;
    right: -100%;
    transition: .5s;
  }

  .header_nav_lists {
    display: block;
    text-align: center;
  }

  .header_nav_lists li {
    margin: 0 0 40px;
    text-align: center;
  }

  .nav_link {
    font-size: 20px;
  }
}

ここからはブラウザ幅が768px以下になったとき、レスポンシブに変更するCSSスタイルを書いていきます。

まず重要なのは、つぎのCSS。簡単にいえば、ブラウザ幅が768px以下になったら{}内のCSSにしてねってこと。

@media screen and (max-width: 768px) {

}

さて、上記の()には次の2つどちらかを指定可能。どっちでもOK。

• max-width…指定値以下になったら実行
• min-width…指定値以上になったら実行

レスポンシブメニューを作るコツとしては、position: fixedとabsoluteを使うこと。まあ正直慣れが必要。作っていくしかない。

※fixedって？
指定した要素をtop / left / bottom / rightで指定、その箇所に固定すること。

※absoluteって？
親要素にfixed / relative / stickyのどれかが使われてるときに使う。親要素のうえに文字をのっけたい(画像のうえとか)場合なんかに使う感じ。慣れが必要。

まあ要素同士を重ねたいときにfixed / relative / sticky、absoluteを使おうねって話。

• ブラウザ幅が768px以下になったら上記のCSSスタイルを適用
• .responsive_btn…display: flexでハンバーガーボタンを表示
• .header_nav…レスポンシブナビ専用のメニューを設定
• .header_nav…ハンバーガーボタンが押されたら表示するため、right: -100%で画面外へ
• レスポンシブメニューのコツはposition: fixedとabsolute

Final Step: レスポンシブナビを表示させるCSSを書こう

/* js function "menuToggle" starting only */
.menu_active {
  right: 0;
}

さっきの「Next Step: レスポンシブメニューを作っていこう」で書いた.header_nav部分の表示、非表示をきりかえるCSSスタイル。

この「.menu_active」は、次のJavaScript編で使うから必ず忘れずに書いておこう。

はい、今回はここまで。

次は最後、JavaScriptをやっていきましょう。
Final Stepへ≫「レスポンシブ」ヘッダーを作る Part3【JavaScript編】