ZeroPlus Media > Web制作 > HTML/CSS > CSSでハンバーガーメニューアイコンを作ろう

CSSでハンバーガーメニューアイコンを作ろう

HTML/CSS

2022/07/23

2023/06/02

HTML&CSS CSSでハンバーガーメニューアイコンを作ろう記事サムネイル

Webサイトを見ていて、このような３本線のアイコンのようなものを見たことはありますか？

この３本線をWebサイトに置くときに、どのようにして実装しようと思いますか？

この記事を読んだ方の多くは、「画像として配置する」ことを考えていると思います。しかし、実際にはこう言った簡単な図形はHTMLとCSSを使って作っていくと良いとされています。

画像を使わず、マークアップで実装するメリットとして、次のものがあります。

画像に比べて、容量が軽くなりやすい
拡大した時に画質が荒くならない
色や形の変更が容易
変形のアニメーションを起こすことができる

ハンバーガーメニューとは
ハンバーガーメニューを作る
- HTMLの構造
- CSSでスタイリング
その他のさまざまなメニュー
まとめ

ハンバーガーメニューとは

ここまで紹介してきた３本線は「ハンバーガーメニュー」という名前がついています。

聞くだけでお腹が空いてくるメニューですね。筆者は、この記事を書いている日の昼食がハンバーガーになりました。

なぜそんな美味しそうな名前をしているかというと、３本線の上下の線をバンズ、真ん中の線をパティに見立てているからです。

ではハンバーガーメニューとは何かについて機能的な面から説明していきます。

ハンバーガーメニューとは、一言で表すと「モバイル端末での表示に対応したナビゲーションメニューのデザインの一つ」です。

PCサイズではうまく表示できるナビゲーションも、モバイル端末のサイズに横幅が変わると、次のように溢れ出してしまいます。（グレーの領域がモバイル端末のサイズだとします。）

See the Pen ハンバーガーメニュー - 使わない場合 by ZeroPlus (@zeroplus-programming) on CodePen.

しかし、ハンバーガーメニューを使い、ナビゲーションを収納することで、モバイル端末でもナビゲーションを綺麗に表示させることが可能となります。

次のデモのハンバーガーメニューをクリックしてみてください。

See the Pen ハンバーガーメニュー - 見本 by ZeroPlus (@zeroplus-programming) on CodePen.

ナビゲーションの画面とコンテンツの画面とで切り替えることができます。

ハンバーガーメニューをまとめると

３本線のアイコンのような形をしている
クリックするとナビゲーションが開ける
慣例的な機能的なデザインの一つ

と言ったものになります。

ここまでハンバーガーメニューについて紹介してきました。次は実際に作るための知識を学んでいきましょう。

ちなみに、クリックした時の動きはJavaScriptというプログラミング言語を使って書いているので、今回は扱いません。

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

こちらはハンバーガーメニューの見た目だけを作ったものになります。

See the Pen ハンバーガーメニュー - 見た目 by ZeroPlus (@zeroplus-programming) on CodePen.

これを参考に、HTMLとCSSをみながら説明していきます。

HTMLの構造

<button class="hamburger">
  <span class="hamburger_bar"></span>
  <span class="hamburger_bar"></span>
  <span class="hamburger_bar"></span>
</button>

ハンバーガーメニューに必要なものは次の２つです

クリックできる範囲
直線 × 3

.hamburgerがハンバーガーメニューのクリックできる範囲、.hamburger_barが３つで３本線を作っています。

buttonタグを使っている理由としては、「クリックできる要素である」と言うことをシステムに認識させるためです。divタグで作っている記事もありますが、ただdivタグで作るだけだと「クリックできる要素である」とシステムに認識させることができないため、不便になってしまう場合があります。

spanタグで線を作っているのは、小さめの装飾だからですね。こちらはspanである必要はないですが、慣例的にspanタグを使用することが多いです。

次はCSSをみていきます。

CSSでスタイリング

.hamburger {
  width: 40px;
  height: 32px;
  position: relative;
}

.hamburger_bar {
  display: block;
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  background: #000;
}

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

.hamburger_bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger_bar:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

ポイントとしては、positionを使って３本線を配置しているところです。

positionを使って配置することで、クリックした時の変形をやりやすくしています。

また、spanタグはインライン要素なので、heightをつけるときは必ずdisplay: block;をかけてあげましょう。

ハンバーガーメニューについては以上となります。

最後に、ハンバーガーメニュー以外のナビゲーションメニューのデザインを紹介します。