チェックボックスでなぜ動くの？

input[type="checkbox"]の:checked状態をCSSで検知して、その兄弟要素（labelやul）にスタイルを適用することで、JavaScriptなしでもトグル動作が可能になります。

三本線がバツに変わる仕組みは？

中央の線（span）を非表示にし、上と下の線（beforeとafter）をそれぞれ回転させることでバツ印に見せています。CSSのtransform: rotate()を使用します。

スマホだけに表示するには？

CSSの@mediaクエリを使って、画面幅が1000px以下のときだけ.sp-nav-wrapperをdisplay: blockにするよう制御しています。

WordPressテーマに組み込むには？

HTMLコードをheader.phpに、CSSはstyle.cssに追記すれば組み込み可能です。ただし、既存のテーマ構造に応じて微調整が必要になる場合があります。

【初心者向け】CSSとチェックボックスだけで作るハンバーガーメニュー

はじめに
今回作るハンバーガーメニューの特徴
1. JavaScript不要！CSSとチェックボックスだけで動作
2. レスポンシブ対応（1000px以下で切り替え）
実装ステップとサンプルコード
1. HTMLの構造と説明
  1. 各要素の役割
2. CSSの説明とコード
  1. CSSでの工夫ポイント
よくある質問（FAQ）
まとめ

はじめに

最近のWebサイトでは、スマートフォン向けに画面上部に”三本線”のアイコンを配置した”ハンバーガーメニュー”をよく見かけます。
このハンバーガーメニューは通常JavaScriptを使って実装されることが多いですが、実はCSSとチェックボックスだけで実装することも可能です。

本記事では、初心者でもコピペで簡単に導入できるCSSのみで作れるハンバーガーメニューの方法を詳しく解説します。
スマホ対応のレスポンシブなメニューを軽量かつシンプルに作りたい方におすすめです。

今回作るハンバーガーメニューの特徴

See the Pen CSSだけで作るハンバーガーメニュー by take it easy (@take-it-easy) on CodePen.

JavaScript不要！CSSとチェックボックスだけで動作

input type="checkbox"を使って、メニューの開閉状態をCSSで切り替えるシンプルな構成です。
JSが使えない環境や、読み込み速度を重視したいサイトに最適です。

レスポンシブ対応（1000px以下で切り替え）

PCではメニューを非表示、スマホサイズではハンバーガーメニューを表示するようにメディアクエリを使って切り替えます。

実装ステップとサンプルコード

HTMLの構造と説明

まず、Font Awesomeを使用するために、以下のCDNを<head>タグ内に追加してください。

<!-- Font AwesomeのCDN読み込み（v6） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

続いて、ハンバーガーメニューのHTML構造です。

<header>
  <div class="header-wrapper">
    <!-- ハンバーガーメニュー全体を囲むラッパー -->
    <div class="sp-nav-wrapper">
      <div class="sp-nav-outer">

        <!-- チェックボックス：開閉の状態を保持 -->
        <input type="checkbox" id="sp-nav-flg" class="sp-nav-flg">

        <!-- ハンバーガーアイコン。チェックボックスと連動する -->
        <label for="sp-nav-flg" class="sp-nav-btn">
          <span></span>
        </label>

        <!-- 実際に表示されるメニューリスト -->
        <ul class="sp-nav-menu">
          <li><i class="fa-solid fa-circle-chevron-right"></i>ホーム</li>
          <li><i class="fa-solid fa-circle-chevron-right"></i>会社概要</li>
          <li><i class="fa-solid fa-circle-chevron-right"></i>お問い合わせ</li>
        </ul>

      </div>
    </div>
  </div>
</header>

各要素の役割

<input type="checkbox">：メニューが開いているかどうかの状態を保持します。
<label>：三本線アイコン。クリックでチェックボックスのON/OFFを切り替えます。
<ul>：表示・非表示されるメニュー本体。

CSSの説明とコード

以下のCSSで、メニューの見た目と動作を定義します。

/* ヘッダーを相対配置にしてメニューを右上に固定 */
div.header-wrapper {
  position: relative;
}

/* メニュー全体は初期状態では非表示 */
.sp-nav-wrapper {
  display: none;
}

/* 画面が1000px以下になった場合にメニューを表示 */
@media screen and (max-width: 1000px) {
  .sp-nav-wrapper {
    display: block;
    width: 320px;
    position: absolute;
    top: 0;
    right: 0;
  }
}

/* チェックボックス自体は画面に表示しない */
.sp-nav-flg {
  display: none;
}

/* ハンバーガーアイコンの外枠 */
.sp-nav-btn {
  display: block;
  width: 35px;
  height: 35px;
  margin: 0 0 5px auto;
  border: 1px solid #333;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

/* 三本線を構成する各線 */
.sp-nav-btn span,
.sp-nav-btn:before,
.sp-nav-btn:after {
  position: absolute;
  width: 25px;
  height: 2.5px;
  background-color: #333;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* 真ん中の線 */
.sp-nav-btn span {
  z-index: 2;
}

/* 上の線を少し上に移動 */
.sp-nav-btn:before {
  content: "";
  transform: translateY(-8px);
}

/* 下の線を少し下に移動 */
.sp-nav-btn:after {
  content: "";
  transform: translateY(8px);
}

/* 回転時のアニメーションをスムーズに */
.sp-nav-btn:before,
.sp-nav-btn:after {
  transition: transform 300ms;
}

/* メニュー開閉：チェック状態のときのスタイル */
#sp-nav-flg:checked ~ .sp-nav-btn span {
  opacity: 0;
}

#sp-nav-flg:checked ~ .sp-nav-btn:before {
  transform: rotate(45deg);
}

#sp-nav-flg:checked ~ .sp-nav-btn:after {
  transform: rotate(-45deg);
}

/* メニュー本体の表示・非表示制御 */
.sp-nav-menu {
  display: none;
  background-color: rgba(0, 0, 0, 0.05);
}

#sp-nav-flg:checked ~ .sp-nav-menu {
  display: block;
}

/* メニューリストの装飾 */
.sp-nav-outer ul {
  list-style: none;
  margin: 0;
  padding: 10px;
}

.sp-nav-outer ul li {
  padding: 10px;
  border-bottom: 1px solid #000;
}

.sp-nav-outer ul li:first-child {
  border-top: 1px solid #000;
}

.sp-nav-outer ul li i {
  margin-right: 10px;
}