ハンバーガーメニューをCSSで作る方法｜初心者向けサンプル付き解説

プログラミング

公開日: 2026/03/12

※この記事にはプロモーションを含みます

はじめに

ハンバーガーメニューはスマートフォン対応のWebサイトでは定番のナビゲーションですが、HTML構造やCSSの指定方法、動きの仕組みが分からず手が止まってしまう方も少なくありません。

本記事では、ハンバーガーメニューの基本構造から具体的な作り方、実用的なサンプルコード、実装時の注意点までを初心者向けに体系的に解説します。仕組みを理解したうえで自力でカスタマイズできる実装力を養いましょう。

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

ハンバーガーメニューの基本構造

ハンバーガーメニューとは、三本線のアイコンをタップするとナビゲーションが表示されるUIパターンです。主にスマートフォン表示で使用されます。

基本構造は次の3要素で成り立ちます。

三本線ボタン：タップのトリガーとなるアイコン部分
ナビゲーションメニュー：表示・非表示が切り替わるリンク一覧
オーバーレイ（任意）：メニュー背後を暗くして視認性を高める層

なぜスマホサイトで使われるのか

スマートフォンの画面幅は限られているため、PCのようにナビゲーションをすべて横並びにすることができません。ハンバーガーメニューを使うことで、必要なときだけメニューを表示し、画面を広く使えるレイアウトが実現できます。

レスポンシブデザインにおける標準的なナビゲーションパターンとして広く普及しています。

実装前に理解すべきポイント

HTMLとCSSだけでハンバーガーメニューを実装するには、「チェックボックスハック」という技術を使います。JavaScriptなしで状態管理を行うための仕組みです。

実装前に以下の概念を押さえておきましょう。

チェックボックスの状態管理：checked属性をCSSで検知する
隣接セレクタ（+）：input要素に隣接する要素へスタイルを適用する
display: none / transform：表示切り替えの基本手法

ハンバーガーメニューの作り方

HTMLの基本マークアップ

まずはHTML構造です。

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-btn">≡</label>

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

ここで重要なのは、inputとlabelを連動させている点です。labelをクリックするとチェック状態が変わり、その状態をCSSで検知します。

CSSでの表示切り替え方法

次に表示制御のCSSです。

/* メニューを初期状態で非表示 */
.menu {
  display: none;
}

/* チェック時にメニューを表示 */
#menu-toggle:checked + .menu-btn + .menu {
  display: block;
}

/* チェックボックス自体は非表示 */
#menu-toggle {
  display: none;
}

隣接セレクタ（+）を使ってチェックボックスの状態に応じてメニューの表示を切り替えます。

チェックボックスが見える状態だとこのようになります。

1.menu-btnをクリックすると、連携されたチェックボックスにチェックが入ることにより、menuが表示される

2.同じ要領で、menu-btnを再度クリックするとチェックが外れて、menuが表示されなくなる

チェックボックスハックの活用

チェックボックスハックとは、JavaScriptを使わずにHTMLのcheckbox要素とCSSの:checked疑似クラスを組み合わせて、UIの状態管理を行う技術です。

仕組みは非常にシンプルです。

input[type="checkbox"]を非表示に設定
label要素をボタンとして見せる
:checkedセレクタでチェック時のスタイルを定義

この仕組みにより、JavaScriptなしでトグル動作が実現できます。

ハンバーガーメニューのサンプルコード

シンプルなCSSのみの実装例

スライドイン型の例です。

.menu {
  position: fixed;
  right: -100%;
  top: 0;
  width: 70%;
  transition: right 0.3s ease;
}

#menu-toggle:checked + .menu {
  right: 0;
}

右側からスライドインするナビゲーションを、transitionプロパティで滑らかに動かします。

アニメーション付きサンプル

アニメーションを付ける場合はdisplayの切り替えではなくtransformやopacityを使います。

display: none → display: blockの切り替えはトランジションが適用されないためです。

.menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 70%;
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

#menu-toggle:checked + .menu-btn + .menu {
  transform: translateX(0);
}

レスポンシブ対応のポイント

ハンバーガーメニューはスマートフォン表示でのみ使用するため、PCでは非表示にします。

/* PCでは通常のナビゲーションを表示 */
@media (min-width: 768px) {
  .menu-btn,
  #menu-toggle {
    display: none;
  }
}

メディアクエリで768px以上をPC表示として切り替えるのが一般的です。

実装時によくある問題と解決策

メニューが開かない原因

メニューが開かないよくある原因

メニューが開かないときに多いのが、CSSセレクタの構造ミスです。特に+セレクタは「直後の要素」にしか適用されないため、構造がずれると動作しません。

よくあるミスを確認しましょう。

input・label・navの順番が正しいか
for属性とid属性が一致しているか
+セレクタのHTML構造が意図通りか

重なり順とz-indexの注意点

メニューが背面に隠れる場合は重なり（z-index） を確認してください。

.menu {
  position: fixed;
  z-index: 100;
}

z-indexはpositionが指定されていないと機能しません。position: fixedやposition: absoluteとセットで指定することが必要です。

クリック領域の最適化

スマホではタップ操作が前提です。ボタンのタップ領域が小さすぎると操作しづらくなります。

paddingを広く設定する
ボタン周囲もクリック可能にする
視認性を確保する

UXを意識した設計が、実務では評価されます。

実務で使える設計とカスタマイズ

デザイン変更の考え方

カスタマイズ時は以下を整理します。

表示方向（右・左・上）
背景色・透過
アニメーション速度

ブランドデザインなどを守りながら、見やすいデザインを心がけましょう。

アクセシビリティへの配慮

実務ではアクセシビリティ対応も重要です。

キーボード操作対応
コントラスト比の確保

アクセシビリティを意識した実装はブラウザの評価対象になります。

JavaScriptを使う場合との違い

今回はHTMLとCSSのみの実装を紹介しましたが、JavaScriptを使うと、以下のような利点があります。

状態管理が柔軟になる
クラス制御が容易
モーダルとの連携が可能

単純なナビゲーションであればCSSのみで十分対応可能ですが、目的に応じて使い分けましょう。

まとめ

ハンバーガーメニューは、スマホ対応サイトにおける標準的なナビゲーションUIです。HTMLとCSSのみでも実装でき、チェックボックスハックや疑似クラスを活用することでシンプルに構築可能です。

重要なのは、仕組みを理解して応用できる状態になることです。表示制御、重なり順、レスポンシブ設計を理解すれば、実務レベルのカスタマイズも可能になります。

より体系的にWeb制作を学びたい方は、実践的なカリキュラムを提供しているWEBMASTERSの活用も有効です。基礎から実務まで段階的に習得できるため、独学よりも効率的にスキルを伸ばせます。

知識だけで終わらせず、実装力として定着させることが、Web制作者として成長するための鍵です。

この記事を
シェアする！