【完全保存版】CSSで作るハンバーガーメニューの実装方法｜JavaScript不要で初心者でもできる作り方

スマホ対応のWebサイトで、
ほぼ必須といえるUIが「ハンバーガーメニュー」です。

スマホでナビゲーションをどう表示すればいい？
JavaScriptなしで実装できる？
CSSだけで本当に動くの？

この記事では、「ハンバーガーメニュー css」で検索した初心者の方に向けて、
CSSだけで実装できるハンバーガーメニューの作り方を、
基礎から実践まで丁寧に解説します。

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

ハンバーガーメニューとは、
三本線（≡）のアイコンをタップすると表示されるナビゲーションメニューのことです。

主にスマートフォン表示で使われ、次のような目的があります。

画面をスッキリ見せる
ナビゲーションを隠して操作性を高める
限られた画面幅を有効活用する

現在のWeb制作では、
スマホ対応＝ハンバーガーメニューと言っても過言ではありません。

CSSだけでハンバーガーメニューは作れる？

結論から言うと、
基本的なハンバーガーメニューはCSSだけで作れます。

ポイントは次の3つです。

チェックボックスで開閉状態を管理
label要素でクリック操作を実現
CSSセレクタで表示を切り替える

この方法なら、
JavaScriptを使わずにメニューの開閉が可能です。

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

まずは、最小構成のHTMLを確認しましょう。

<input type="checkbox" id="menu-toggle">

<label for="menu-toggle" class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</label>

<nav class="menu">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

構造のポイント

checkboxで「開いている／閉じている」を管理
labelをクリックするとcheckboxが切り替わる
HTML構造はシンプルで分かりやすい

ハンバーガーアイコンのCSS

次に、三本線のアイコンをCSSで作ります。

.menu-btn {
  width: 30px;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  height: 3px;
  background: #333;
  margin: 6px 0;
}

これだけで、
よく見かけるハンバーガーアイコンが完成します。

メニューを初期状態で非表示にする

#menu-toggle {
  display: none;
}

.menu {
  display: none;
}

最初はメニューを隠しておくのが基本です。

クリックでメニューを表示する仕組み

#menu-toggle:checked + .menu-btn + .menu {
  display: block;
}

仕組み解説

checkboxがchecked状態になる
CSSの隣接セレクタで.menuを表示
JavaScriptは一切不要

スライド式ハンバーガーメニューにする方法

実際のサイトでは、
スライドして表示されるメニューがよく使われます。

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

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

これで、
右からスライドして出てくるハンバーガーメニューになります。

レスポンシブ対応（PCでは表示しない）

スマホ専用にしたい場合は、
メディアクエリを使います。

@media screen and (min-width: 769px) {
  .menu-btn {
    display: none;
  }

  .menu {
    position: static;
    display: block;
  }
}

ポイント

PCでは通常のナビゲーション表示
スマホのみハンバーガーメニュー

よくあるトラブルと対処法

メニューが表示されない

HTMLの並び順が違う
セレクタ指定が間違っている

メニュー内がスクロールできない

.menu {
  overflow-y: auto;
}

背景がクリックできてしまう

.menu {
  z-index: 1000;
}

CSSハンバーガーメニューのメリット・デメリット

メリット

JavaScript不要
軽量で表示が速い
実装がシンプル

デメリット

複雑な制御には向かない
アクセシビリティ対策が必要

初心者におすすめの使いどころ

CSSだけのハンバーガーメニューは、
次のようなサイトに向いています。

個人ブログ
小規模サイト
LP（ランディングページ）

よくある質問

JavaScriptは使ったほうがいい？

高度な動作が必要な場合は使いますが、
基本的なメニューならCSSだけで十分です。

SEOに影響はありますか

直接的な影響はありません。
ただし、操作しやすさはユーザー評価に影響します。

まとめ

CSSを使えば、
ハンバーガーメニューはJavaScriptなしでも実装可能です。

checkbox＋labelで開閉制御
CSSセレクタで表示切り替え
スライド演出も可能
レスポンシブ対応も簡単

「ハンバーガーメニュー css」で検索した方は、
まず シンプルな構成で一度作ってみることをおすすめします。
仕組みを理解すれば、応用も自在にできるようになります。

【完全保存版】CSSで作るハンバーガーメニューの実装方法｜JavaScript不要で初心者でもできる作り方