30days

ヘッダーの作り方 【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

本日から1日1セクションでデイトラ2ndの解説記事を上げていこうと思います!

ピクセルパーフェクトは行ってないので、コーディング時の参考ぐらいに思ってくれれば幸いです。
ご質問があれば答えますのでDMでお問い合わせください。@hirokiweblax

今回はヘッダー部の解説を行います!

ポイントは3点です、以下の3つを覚えましょう。

本日のポイント

・インナーを覚える
・flexboxで横並び、上下中央ぞろえにする
・セレクタ not(first-child)

完成形

まず完成形とコードを確認します。

目標とするヘッダーはこのようになります。

完成形

そしてコードは以下のようになります。

HTML

<header>
  <div class="inner">
    <div class="header-left">
      <h1 class="logo">
        <a href="#"><img src="img/logo.png" alt="The Company"></a>
      </h1>
    </div>
    <div class="header-right">
      <nav class="nav">
        <ul class="">
          <li><a href="#card">Card</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#price">Price</a></li>
          <li><a href="#access">Access</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div><!-- /inner-->
</header>

 

CSS

header {
  background-color: #3f51b5;
  height: 100px;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}

header .inner {
  max-width: 1086px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header ul {
  display: flex;
}

header li {
  list-style: none;
}

header li:not(first-child) {
  margin-left: 30px;
}

header li a {
  color: white;
  font-size: 16px;
}

header .logo img {
  vertical-align: bottom;
}

body {
  font-family: "YuGothic";
}

 

ではこのコードを解説していきます。

ブロック分け

HTMLを書くためには、ブロック分けをイメージできる必要があります。

今回のブロック分けとしては、主に以下の2つとなります。
1. インナーをつける(緑線)
2. ロゴ部分を左寄せ、ナビ部分を右寄せにする(赤枠)

インナーをつける

インナーをつけることで、画面が小さい時には画面幅にレスポンシブ対応になり、画面が大きくなった時には要素が中央に固定されます
インナーはほぼ全部のセクションで使うので、絶対に覚えておきましょう!

覚えておくべきはこの3行

header .inner {
  max-width: 1086px;
  width: 100%;
  margin: 0 auto;
}

 

max-widthは要素全体の幅で、左の緑線から右の緑線までの幅を指定してください。

max-width:1086px;width:100%;を指定することで、
画面幅が1086px以下になった時に要素が画面幅になり、1086px以上は1086pxで固定されレスポンシブ対応となります。
margin: 0 auto;はinnerに左右に自動でマージンをつけてくれるので、中央揃えになります。

ぜひ以下の記事も参考にしてください!

要素の位置を整える

次にflex-boxでロゴとナビの位置を整えます。

flex-boxの使い方を知らない人は以下のリンクを参考にしてください!

ロゴとナビを横並べにするためには、display:flex;を使います。

そしてロゴは左寄せに、ナビは右寄せにするためにjustify-content:space-between;を使います。
innerの子要素が二つしかないので、左の要素は左に、右の要素は右寄せになります。

上下の中央に要素を揃えるためにalign-items:center;を指定します。

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

同様にナビも横並べに

header ul {
  display: flex;
}

ここまできたら下の画像のようになったかと思います。

あと少しです!ナビの要素に余白をつけましょう!
ここではセレクタ:not(first-child)を使います。

header li:not(first-child) {
  margin-left: 30px;
}

 

このセレクタを解説すると、
first-childというのは、li要素の最初のことを指します。
not()は()内以外の要素を選択することになります。

つまり、liの最初の要素以外にmargin-leftをつけることになります。

Card以外のナビの左にマージンが付いている状態ですね

すると以下の画像のようになります。

これで完成です!お疲れ様でした!

まとめ

今回大切なのは以下の3点です、どれも使うのでしっかり覚えましょう!

本日のポイント

・インナーを覚える
・flexboxで横並び、上下中央ぞろえにする
・セレクタ not(first-child)

捕捉

Codepen

See the Pen
30Days 【ヘッダー部】
by hiro (@hirog)
on CodePen.

See the Pen
30Days 【ヘッダー部】
by hiro (@hirog)
on CodePen.

・ロゴメニューの位置のズレをvertical-align:bottom;で調整しています。
https://kutarosan.com/header-flex/

・マージンは上と左につけましょう