\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > L_HTML/CSS > Step5 > CSSでハンバーガーメニューアイコンを作ろう
HTML&CSS CSSでハンバーガーメニューアイコンを作ろう記事サムネイル

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

2022/07/14

2023/07/14

この記事で身につく内容
  • ハンバーガーメニューとはなにか
  • HTMLとCSSだけでハンバーガーメニューを作る方法
  • さまざまなメニューの形の種類

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

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

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

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

画像に比べて、容量が軽くなりやすい

拡大した時に画質が荒くならない

色や形の変更が容易

変形のアニメーションを起こすことができる

今回の記事では、このハンバーガーメニューをつくる方法を見ていきましょう。

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

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

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

 

なぜそんな美味しそうな名前をしているかというと、3本線の上下の線をバンズ、真ん中の線をパティに見立てているからです。
ではハンバーガーメニューとは何かについて機能的な面から説明していきます。

 

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

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

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

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

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

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

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

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

3本線のアイコンのような形をしている

クリックするとナビゲーションが開ける

慣例的な機能的なデザインの一つ

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

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

ちなみに、クリックした時の動きは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>

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

クリックできる範囲

直線 × 3

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

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

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

次はCSSをみていきます。

CSSでスタイリング

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

.hamburger_bar {
  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を使って3本線を配置しているところです。

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

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

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

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

その他のさまざまなメニュー

ナビゲーションメニューのデザインには、ハンバーガーメニューの他にも種類があります。それぞれ同じような役割を持っている場合もあれば、デザインから特定の役割をもつメニューまであります。

下記の名前はデザインの名前として広く使われているものです。知っておくと、検索する時に役立ちます。

ケバブメニュー

See the Pen ケバブメニュー by ZeroPlus (@zeroplus-programming) on CodePen.

トルコ料理のケバブのような形をしているからケバブメニューという名前になっているようです。縦に串刺しになっている肉のようだからケバブと付いたようです。筆者的には焼き鳥の「つくね」の方がしっくりくる気がします。

機能的にはハンバーガーメニューと同じような扱い方をします。Webサイトよりもアプリケーションで見かけることの方が多いです。

PC版のChromeの右上のメニューのボタンもケバブメニューとなっています。

ミートボールメニュー

See the Pen ミートボールメニュー by ZeroPlus (@zeroplus-programming) on CodePen.

ケバブメニューを倒したものがミートボールメニューです。もはや訳がわからない。おそらく、名づけに深い意味はないです。

機能的にはハンバーガーメニューやケバブメニューと同じような扱い方をします。こちらも、Webサイトよりもアプリケーションで見かけることの方が多いです。

筆者の体感、スマホアプリはこちらの方が使われている気がします。

弁当メニュー

See the Pen 弁当メニュー by ZeroPlus (@zeroplus-programming) on CodePen.

格子状で弁当のように見えるから弁当メニューと呼びます。

機能的にはハンバーガーメニューやケバブメニューと同じような扱い方をします。こちらも、アプリケーションで見かけることの方が多いです。たまに、学校や役所のホームページで使われていたりまします。

ドネルメニュー

See the Pen ドネルメニュー by ZeroPlus (@zeroplus-programming) on CodePen.

ドネルメニュー、ドネルケバブメニューと呼んだりします。

機能的には他のメニューと同様の扱い方をするのに加えて、フィルター(絞り込み機能)に使う場合もあるようです。

以上たくさんのメニューを紹介してきました。

ハンバーガーメニューがダントツの使用頻度なので、一旦はハンバーガーメニューだけ覚えておけばOKです。

まとめ

今回はハンバーガーメニューついて紹介してきました。モバイルサイズのサイトを作る上では、必ず作る機会があるデザインですので、

  • ハンバーガーメニューがどんなものを指すか
  • HTML, CSSでハンバーガーメニューの見た目を作れる
  • ハンバーガーメニューの基本の構成とCSSの書き方

という点を抑えて、自分でも作れるようにしていきましょう!

マークアップを自分でできるようになれば、JavaScriptで動かす時も簡単に実装できますので、ぜひ構造を理解して、自分で作れるようになりましょう。

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから