【完全保存版】CSSだけで作るスマホメニューの実装方法｜ハンバーガーメニューを初心者向けに徹底解説

スマホ対応のWebサイトを作る際、
ほぼ必ず必要になるのが「スマホ用メニュー」です。

スマホでナビゲーションをどう表示すればいい？
ハンバーガーメニューをCSSだけで作れる？
JavaScriptは使わないとダメ？

この記事では、「スマホメニュー css」で検索した初心者の方に向けて、
CSSだけで実装できるスマホメニューの作り方を、
基礎から実践まで分かりやすく解説します。

スマホメニューとは何か

スマホメニューとは、
スマートフォン表示時に使われるナビゲーションメニューのことです。

代表的な表示方法は次の通りです。

ハンバーガーメニュー（≡）
スライドメニュー
フルスクリーンメニュー

特にハンバーガーメニューは、
最も一般的で多くのサイトで採用されています。

なぜスマホ専用メニューが必要なのか

PC用ナビゲーションをそのままスマホで表示すると、

横幅に収まらない
文字が小さく押しづらい
画面がごちゃごちゃする

といった問題が起こります。

そのため、
スマホではメニューを折りたたむ設計が基本になります。

CSSだけでスマホメニューは作れる？

結論から言うと、
基本的なスマホメニューはCSSだけで作れます。

メニューの開閉
表示／非表示の切り替え
スライドアニメーション

これらは、
チェックボックス＋CSS を使えば実装可能です。

スマホメニューの基本構造（HTML）

まずは、基本となるHTML構造を見てみましょう。

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-button">
  <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をクリックするとチェックが切り替わる
JavaScript不要

ハンバーガーボタンのCSS

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

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

これで、
三本線のハンバーガーアイコンが作れます。

メニューを非表示にするCSS

#menu-toggle {
  display: none;
}

.menu {
  display: none;
}

初期状態では、
メニューを隠しておきます。

クリックでメニューを表示するCSS

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

仕組み

checkboxがchecked状態になる
CSSセレクタでメニューを表示

これが、
CSSだけでメニューを開閉する仕組みです。

スライドメニューにする方法

より実用的にするため、
スライド表示にしてみましょう。

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

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

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

レスポンシブ対応（PCでは非表示）

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

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

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

ポイント

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

スマホメニューでよくあるトラブル

メニューが閉じない

checkboxの位置関係がズレている
セレクタ指定が間違っている

スクロールできない

.menu {
  overflow-y: auto;
}

長いメニューには必須です。

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

.menu {
  z-index: 1000;
}

重なり順を調整しましょう。

CSSスマホメニューのメリット・デメリット

メリット

JavaScript不要
軽量
実装がシンプル

デメリット

複雑な制御は難しい
アクセシビリティ対応に工夫が必要

初心者におすすめの使い方

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

これらでは、
CSSだけのスマホメニューで十分です。

よくある質問

JavaScriptは使ったほうがいいですか

高度な制御が必要な場合は使いますが、
基本的なスマホメニューなら不要です。

SEOに影響はありますか

メニュー自体はSEOに直接影響しません。
ただし、使いやすさはユーザー評価に影響します。

まとめ

CSSを使えば、
スマホ用メニューはJavaScriptなしでも実装可能です。

checkbox＋labelで開閉制御
positionとtransitionでスライド演出
メディアクエリでPCと切り替え

「スマホメニュー css」で検索した方は、
まず シンプルなハンバーガーメニューを作ってみてください。
仕組みを理解すれば、応用も自在にできるようになります。

【完全保存版】CSSだけで作るスマホメニューの実装方法｜ハンバーガーメニューを初心者向けに徹底解説