HTMLとCSSでヘッダーのコーディング方法を解説！

今回は、HTMLとCSSを使ってヘッダーをコーディングしていきます。デザインを元に模写をする流れを解説します。プログラミング初学者やコーディング練習として模写をしたい駆け出しエンジニアにもおすすめです。

ヘッダーデザインはどのサイトでも必ずでてくる再頻出のUIパーツです。基礎となるHTMLの構造とCSSの書き方を覚えておくことで、変化に強く汎用性の高いヘッダーをつくることができます。

コーディングの準備をする

完成形のデザインを確認しましょう

一般的なロゴとナビゲーションで構成されたよくあるヘッダーになります。

デザインの基本情報

ヘッダーをコーディングするにあたって、必要となる情報は以下の通りです。

• ヘッダーは画面上部に固定
• 横幅は画面幅に対して100%(100vw)
• 高さは70px
• 内側の余白は画面幅に対して90%(90vw)、ただし最大幅は1152px
• 背景色は黒(#333333)、文字色は白(#ffffff)
• ロゴ画像の大きさは横幅100px、縦幅35px
• ナビゲーションの文字の大きさは16px
• ナビゲーション同士の間隔は60px
• ヘッダーの影はY方向に2px、ぼかし4px、色は黒(#000000)の透明度20%

コーディングの目標時間

20分以内でコーディングが終えられるように頑張ってみましょう。

自分なりにコードを書いてみる

Yuto Seta

上のデザインと基本情報を元にまずは自分なりにコーディングをしてみましょう。

コーディングの手順

1. HTMLを書き出す
   1. ヘッダー全体と内側の余白を確保するためのインナー要素にわける
   2. ロゴ部分とナビゲーション部分でわける。
   3. ナビゲーションの中の子要素としてナビアイテム一つ一つの要素を配置する。
2. CSSを書き出す
   1. ヘッダーを画面上部に固定する
   2. ヘッダー内に余白をもうけるインナー要素をつくる
   3. ヘッダー内の各要素が上下中央揃えになるようにする
   4. ロゴ部分とナビゲーション部分を左右に話して設置する
   5. フクロウセレクタでナビ要素同士に間隔をあける

実際のソースコード

実際のソースコードは以下の通りです。
コーディングのお手本として参考にしてください。
自分なりにコーディングしてみたら、答え合わせをしてみましょう。

初心者はまずは見た目を完璧に同じにすることを目標にしてください。

中級者はなぜそのようなソースコードになったのか？と考えながら読み進めていってください。

上級者はこれよりも優れたコードはないだろうか？と考えながら読み進めていってください。

HTML

<div class="header">
  <div class="header__inner">
      <img class="header__logo" src="https://placehold.jp/bbbbbb/ffffff/100x35.png?text=LOGO">
    <div class="header__navgroup">
      <div class="header__navitem">TOP</div>
      <div class="header__navitem">ABOUT</div>
      <div class="header__navitem">BLOG</div>
      <div class="header__navitem">CONTACT</div>
    </div>
  </div>
</div>

ヘッダーのHTMLはこのような構造にしました。ポイントは、.header__innerを設けてヘッダーの内側に余白を確保するようにしているところです。デザイン上で明確な境界線はありませんが、この見えない要素をいれておくことで柔軟なコーディングができます。

CSS

.header{
  margin-top: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header__inner{
  max-width: 1152px;
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header__logo{
  flex: none;
  width: auto;
  height: 35px;
}
.header__navgroup{
  margin-left: auto;
  display: flex;
  flex: none;
}
.header__navgroup > * + *{
  margin-left: 60px;
}
.header__navitem{
  font-size: 16px;
  color: #fff;
}

ヘッダーのCSSは上記の通りです。

ヘッダーの特徴

ヘッダーのコーディングを効率よく進めていく上で、ヘッダーの特徴を把握しておくとよいです。

position:fixed;でヘッダーを画面上部に

position: fixed;
top: 0;
left: 0;

今回のヘッダーは画面上部に固定して、スクロールしても追従する形をとりたいので、position: fixed;をつかっていきます。追従しなくても良い場合は、position: absolute;などを使いましょう。

ヘッダーの内側に一定の余白を確保するインナー要素

.header{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.header__inner{
　　　max-width: 1152px;
　　　width: 90%;
}

flexボックスを縦方向、左右中央揃えのコンテナにして、子要素に幅を持たせることで余白をもちつつ中央に揃えてくれるインナー要素がつくれます。最大幅をmax-widthで指定しています・

align-items:center;で各要素が上下中央に揃うようにレイアウトする

.header__inner{
  display: flex;
  align-items: center;
}

display:flex;を指定して子要素を横並びにしたあとに、align-items:cener;を実行することで子要素が上下方向に中央揃えされます。

ロゴとナビを左右に間隔を空けて配置する

.header__inner{
   display: flex;
   justify-content: flex-start;
   align-items: center;
}
.header__navgroup{
   margin-left: auto;
}

flexアイテムの2番目の要素であるナビゲーションにmargin-left: auto;を指定することでflexコンテナ内で余っている余白を左側の余白として利用します。flex内でmarginを思い通りに扱うテクニックになります。CSS中級者向けです。

フクロウセレクタでナビ同士の間隔をあける

.header__navgroup > * + *{
  margin-left: 60px;
}

このような記述をすることで.header__navitemの二番目以降の要素の左側にマージンをとることができます。フクロウセレクタ (*+*)というテクニックになります。

CodePenで完成品をデモでみる。

まとめ

今回はヘッダーのコーディングをしてみました。flexboxレイアウトをフルに活用することで画面幅の変更に強いヘッダーをつくることができます。flex-direction:column;をつかったインナー要素やalign-items:center;をつかった上下中央揃えのテクニックはよくつかいます。

レイアウトはflexボックスを正しく理解していけば必ず自在に操れるようになります。positionやmarginに頼ったレイアウトは少し画面の幅を変えただけで崩れてしまう変化に弱い実装方法です。とにかく、フレックスボックスをフル活用していきましょう！！

この記事をかいてみての感想

Yuto Seta

HTMLやCSSに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントまってます！

▼感想
ヘッダーの解説というより、もはやflexレイアウトをおすすめする記事になってしまいました。この記事も再度見直してブラッシュアップを図りたいです。

▼書き足したい内容メモ
・flex:none;とflex:auto;の使い分け。
・レスポンシブでスマホ版の時にハンバーガーメニューを表示する実装方法。
・中のコンテンツに最大幅を設定する意味。