ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】初心者でも簡単にできるヘッダーの作り方を解説

【CSS】初心者でも簡単にできるヘッダーの作り方を解説

HTML/CSS

2022/06/30

2023/05/08

この記事ではHTML,CSSを使った「ヘッダーの作り方」を解説します。

JavaScriptを使ったハンバーガーメニューの作り方に関しては、下記の記事で詳しく解説しているので、ご一読ください。

JavaScriptを使ったハンバーガーメニューを作ろう！

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

サンプルのダウンロード
デザインの確認
コーディングしてみよう
- 全体のレイアウト
- ヘッダーとフッター、mainタグ内のスタイルを整える
ヘッダーを作る
ハンバーガーメニューを作る
ハンバーガーメニュークリック後の動きを作る
ナビゲーションメニューを作る
レスポンシブでPCサイズを作る
まとめ

サンプルのダウンロード

以下のリンクからサンプルをダウンロードしましょう。

サンプルコード

ファイルを開くと、以下2つのファイルが入っています。

「code」→HTML・CSSファイル・画像ファイルが入っているファイル
「mock」→モックアップ画像

下記からサンプルコードを確認することもできます。

See the Pen header作り方 by ZeroPlus (@zeroplus-programming) on CodePen.

デザインの確認

エディタでファイルを開くと、mockフォルダの中にモックアップ画像ファイルが3つ入っています。全体のデザインを確認しましょう。

SP（モバイル）デザイン（375sp-mock.png）

ハンバーガーメニューをクリックしたときにナビゲーションメニューが出るようにしていきます。

PCのデザイン（1280pc-mock.png）

PCデザインのときはハンバーガーメニューは非表示、ナビゲーションメニューが表示されるようにしていきます。

コーディングしてみよう

コーディングを行う際はいきなりコードを記述せず、サイトのデザインを確認します。

サイトのデザインを確認する
HTMLでサイトの構造を記述する
CSSでサイトの見た目を整えていく
JavaScriptで動きをつけていく

上記の流れを意識して、実際にコーディングを行っていきます。

全体のレイアウト

HTMLで構造を記述する

まずは大枠を作成します。

<body>
  <div class="container">
    <header class="header">
    </header>
    <main>
      <div class="main">
        メインコンテンツエリア
      </div>
    </main>
    <footer class="footer">
      <div>
        フッターエリア
      </div>
    </footer>
  </div>
</body>

containerクラスの中にheader、footer、main、を記述します。

CSSでサイトの見た目を整えていく
今回のサイトを制作するにあたってこちらのサイトを参考にreset.cssを作成し、linkタグでreset.cssを適用します。

reset.cssは各ブラウザで適用されているデフォルトスタイルを上書きして、各ブラウザのスタイルを揃える役割があります。reset.cssはstyle.cssより先に記述しています。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Document </title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
</head>

ヘッダーとフッター、mainタグ内のスタイルを整える

style.cssにmainタグ、footerタグにスタイルをあてます。

/* 調整用スタイル */

a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

main {
  background-color: #f1f1f1;
  height: 800px;
  display: flex;
}

.main {
  margin: auto;
}

.footer {
  background-color: #f6f6f6;
  height: 200px;
  display: flex;
}

.footer div {
  margin: auto;
}

aタグはデフォルトでアンダーラインが表示されるので、text-decoration: none;を用いてアンダーラインを非表示にします。ulタグ、liタグも同様に「・」がデフォルトで文頭に表示されるので、list-style: none;を用いて非表示にします。

続いてヘッダーにスタイルをあてます。

/* ヘッダー */
.header {
  background-color: white;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

スクロールしてもヘッダーを追従させたいので、position: fixed;を適用します。

また、ヘッダーは表示順を上にしたいのでz-index: 999;を指定します。

ヘッダーを作る

HTMLで構造を記述する

headerタグの中を作ります。

<header class="header">
  <div class="header__inner">
    <h1 class="header__title header-title">
      <a href="#">
        <img src="images/logo-black.png" alt="ロゴ画像">
      </a>
    </h1>
    <nav class="header__nav nav">
    </nav>
    <button class="header__hamburger hamburger">
    </button>
  </div>
</header>

ヘッダーの中の左右の余白を確保するため、header-innerクラスを入れています。h1タグの中にはimgタグでロゴ画像を適用しています。ロゴ画像をクリックしたらトップに戻りたいのでimgタグをaタグで囲います。

ナビゲーションメニュー用にnavタグを記述します。

ハンバーガーメニューはbuttonタグで作成します。buttonタグで作る理由はフォーカスを適用させるためです。divタグで作るとフォーカスが当たりません。

CSSでヘッダーの見た目を整えていく

2022年現在、モバイルファーストで記述することが推奨されているので、SP（モバイル）サイズから適用していきます。

style.cssに以下のように記述します。

.header__inner {
  padding: 0 20px; /*左右の余白確保*/
  display: flex; /*ロゴとハンバーガーメニューを横に並べる*/
  align-items: center;
  justify-content: space-between;
  height: inherit; /*親要素の高さを継承*/
  position: relative;
}

/* ヘッダーのロゴ部分 */
.header__title {
  width: 80px;
}


.header__title img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%); 
  background-color: #fff; /*ハンバーガーメニュークリック時のナビゲーションメニュー背景色*/
  transition: ease .4s; /*ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延*/
}

/* ハンバーガーメニュー */
.header__hamburger {
  width: 48px;
  height: 100%;
}

.hamburger {
  background-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  border-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  z-index: 9999;
  cursor: pointer;
}

header-innerクラスではロゴの左側とハンバーガーメニューの右側に余白をpaddingで確保しています。ロゴとハンバーガーメニューを横並びにしたいのでflexboxを利用しています。

header__navクラスはtransform: translateX(100%);でコンテンツよりも右側に移動させておきます。hamburgerクラスはフォーカスを当てたいのでbuttonタグを使用します。その際にbuttonタグにデフォルトで当たっている一部のスタイルを、別のスタイルで打ち消します。

ハンバーガーメニューを作る

HTMLで構造を記述する

ハンバーガーメニューを作ります。

<button class="header__hamburger hamburger" id="js-hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

ハンバーガーメニューの三本線を表現するためにspanタグを使用します。

CSSでハンバーガーメニューの見た目を整えていく

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: relative;
  transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}


.hamburger span:nth-child(3) {
  top: 0;
}

ハンバーガーメニューの三本線をpositionで微調整します。線はwidthとheight、線の色をbackground-colorで表現しています。

ハンバーガーメニュークリック後の動きを作る

ハンバーガーメニュークリック後の動きの制御については、下記の記事で詳しく解説しているので、ご一読ください。

JavaScriptを使ったハンバーガーメニューを作ろう！

ここではハンバーガーメニュー完成後のコードを記述します。

HTMLで構造を記述する

<nav class="header__nav nav" id="js-nav">
  <ul class="nav__items nav-items">
  </ul>
</nav>

<button class="header__hamburger hamburger active" id="js-hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}

const ham = document.querySelector('#js-hamburger'); //js-hamburgerの要素を取得し、変数hamに格納
const nav = document.querySelector('#js-nav'); //js-navの要素を取得し、変数navに格納

ham.addEventListener('click', function () { //ハンバーガーメニューをクリックしたら
  ham.classList.toggle('active'); // ハンバーガーメニューにactiveクラスを付け外し
  nav.classList.toggle('active'); // ナビゲーションメニューにactiveクラスを付け外し
});

ナビゲーションメニューを作る

HTMLで構造を記述する

ナビゲーションメニューを作ります。

<nav class="header__nav nav" id="js-nav">
  <ul class="nav__items nav-items">
    <li class="nav-items__item"><a href="">メニュー</a></li>
    <li class="nav-items__item"><a href="">メニュー</a></li>
    <li class="nav-items__item"><a href="">メニュー</a></li>
    <li class="nav-items__item"><a href="">メニュー</a></li>
  </ul>
</nav>

ナビゲーションメニューはulタグ、liタグで作っていきます。メニューをクリックしたらリンク先に遷移するようにaタグも記述します。

CSSでナビゲーションメニューのスタイルを整える

.nav-items {
  padding-top: 250px;
  padding-bottom: 200px;
}

/* ナビのリンク */
.nav-items__item a {
  color: black;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 24px;
  margin-bottom: 24px;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

メニュー間の余白を調整するため、margin-bottomで余白を設けます。最後のメニューに関しては、下余白は不要なのでlast-childでmargin-bottomを0にして余白を打ち消します。

これでSP（モバイル）サイズは完成しました。次にレスポンシブ対応するためにPCサイズを作ります！

レスポンシブでPCサイズを作る

レスポンシブではメディアクエリを使用します。

モバイルファーストかPCファーストかで書き方が異なります。

@medeia screen and (min-width: ○○px) {　}・・・モバイルファースト
@medeia screen and (max-width: ○○px) {　}・・・PCファースト

今回は960pxからPCサイズに設定したいので、@medeia screen and (min-width: 960px) とします。

CSSでPCサイズのスタイルを整える

書き方はいろいろありますが、ここではSP時のスタイルの直下にPC時のスタイルを記述する形にします。ブロックごとに分けることで、あとでスタイルが変更になった場合でも修正しやすくなります。

なお@media screen and (min-width: 960px)の中でまとめて適用しても大丈夫です。

/* ヘッダーのロゴ部分 */
.header__title {
  width: 80px;
}

@media screen and (min-width: 960px) {
  .header__title {
    width: 140px;
  }
}


/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #fff;
  transition: ease .4s;
}

@media screen and (min-width: 960px) {
  .header__nav {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: 40%;
  }
}


/*PC時のナビゲーションメニュー、横並びにする*/
@media screen and (min-width: 960px) {
  .nav__items {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }
}


.nav-items {
  padding-top: 250px;
  padding-bottom: 200px;
}

@media screen and (min-width: 960px) {
.nav-items {
   padding-top: inherit;
   padding-bottom: inherit;
  }
}


/* ナビのリンク */
.nav-items__item a {
  color: black;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  margin-bottom: 24px;
}

@media screen and (min-width: 960px) {
.nav-items__item a {
   margin-bottom: 0;
   font-size: 18px;
  }
}


/*ハンバーガーメニュー*/
.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

@media screen and (min-width: 960px) {
  /*PC時非表示にする*/
  .hamburger {
    display: none;
  }
}

ハンバーガーメニューはPC時非表示にしたいのでdisplay: none;を適用します。

ナビゲーションメニューはSP時縦並びになっていましたが、PC時では横並びに変更したいのでflexboxを適用していきます。

ここでPC時のメニューに、ホバー時の動きを追加してあげましょう！

メニューをマウスホバーしたらメニュー下部に線が出るようにするので、線を疑似要素で作ります。

@media screen and (min-width: 960px) {
  .nav-items__item:before {
    position: absolute;
    content: "";
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: orange;
    opacity: 0;
  }
}

線の位置はposition: absolute;で位置を指定します。ホバー前は線を非表示にしたいので、opacity: 0;を適用します。

メニューホバー時のスタイルは次のようになります。

@media screen and (min-width: 960px) {
  .nav-items__item:before {
    position: absolute;
    content: "";
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: orange;
    opacity: 0;
  }

  .nav-items__item:hover:before {
    opacity: 1;　/* 追記 */
  }
}

出力結果

See the Pen header作り方 by ZeroPlus (@zeroplus-programming) on CodePen.

これで完成しました！