Section 001

ヘッダーナビトグル

CSSのみで実装するアコーディオン式ナビゲーションメニュー。JavaScriptを使わずにチェックボックスのハック技法を活用しています。

学習ポイント

チェックボックスハック - inputのchecked状態をCSSで検知してUIを切り替える技法
兄弟セレクタ（~） - チェックボックスの状態に応じて後続の要素をスタイリング
max-heightアニメーション - heightではなくmax-heightを使うことでスムーズな開閉を実現
疑似要素（::after） - CSSで装飾用のコンテンツを追加

HTML構造の解説

<input type="checkbox" id="menuToggle" class="menu-toggle" />
<label for="menuToggle" class="toggle-btn"></label>
<nav class="nav-menu">
<ul>
<li><a href="#home">Home</a></li>
...
</ul>
</nav>

ポイント解説

input[type="checkbox"] は実際には非表示にしますが、HTMLの中で重要な役割を果たします。label要素のfor属性とinputのidを紐付けることで、labelをクリックするとチェックボックスのON/OFFが切り替わります。

なぜこの順番？
inputの後にnav要素を配置しているのは、CSSの兄弟セレクタ（~）を使うためです。兄弟セレクタは「前の要素」から「後の要素」にしか適用できません。

CSS解説

1. チェックボックスを非表示にする

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

ユーザーにはチェックボックスを見せず、代わりにlabel要素をクリック対象とします。

2. トグルボタンのスタイル

.toggle-btn {
font-size: 24px;
background: none;
color: #333;
cursor: pointer;
text-align: center;
}
.toggle-btn::after {
content: " ▼"; /* 下向き三角形 */
font-size: 16px;
}

::after 疑似要素で三角形の矢印を追加しています。これによりHTMLを汚さずに装飾を追加できます。

3. メニューの初期状態（閉じた状態）

.nav-menu {
max-height: 0; /* 初期状態で非表示 */
overflow: hidden; /* はみ出した部分を隠す */
transition: max-height 1s ease; /* アニメーション */
}

なぜheightではなくmax-height？
CSSのheight: autoはtransitionが効きません。そのため、max-heightを使って十分に大きな値（500pxなど）を指定することで、スムーズなアニメーションを実現しています。

4. チェック時のスタイル（開いた状態）

.menu-toggle:checked ~ .nav-menu {
display: block;
max-height: 500px; /* メニューの高さに応じて調整 */
}

:checked 疑似クラスでチェックボックスがONの時を検知。~（一般兄弟セレクタ）で後に続く.nav-menuのスタイルを変更します。

レスポンシブ対応

@media screen and (max-width: 767px) {
.nav-menu ul {
flex-direction: column;
}
}

767px以下の画面幅では、Flexboxの方向をcolumnに変更してメニューを縦並びにします。

応用・発展

三角矢印を開閉に応じて回転させる（.menu-toggle:checked ~ .toggle-btn::after { transform: rotate(180deg); }）
ハンバーガーメニューアイコンに変更して、モバイルファーストのデザインに
複数のサブメニューを持つ多階層ナビゲーションへの拡張