CSSだけで作るアコーディオンメニュー｜チェックボックスで簡単実装！

20

Views

JavaScriptを使わずに、CSSだけでアコーディオンメニューを実装できるって知っていましたか？この記事では、チェックボックス（input）を使ったシンプルで軽量なアコーディオンの作り方をご紹介します。

アコーディオンメニューとは？

クリックするとメニューの中身が表示・非表示に切り替わるUIのことです。FAQやサイドメニュー、スマホナビゲーションなどによく使われます。

HTML構造

<div class="accordion">
  <input type="checkbox" id="toggle1">
  <label for="toggle1">項目1</label>
  <div class="content">
    内容がここに入ります。
  </div>
</div>

CSSで開閉の制御を実装

:checked疑似クラスと兄弟セレクタ（+）を使って表示を切り替えます。

.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion input:checked + label + .content {
  max-height: 200px; /* 必要に応じて調整 */
}

スタイル調整例

.accordion label {
  display: block;
  background: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}

.accordion .content {
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
}

チェックボックスの非表示化

チェックボックスそのものは非表示にして、ラベルだけをクリック可能にします。

.accordion input[type="checkbox"] {
  display: none;
}

おわりに

JavaScript不要でアコーディオンを実装できるこの方法は、表示速度や保守性の面でも有利です。シンプルなUIを作りたいときにぜひ活用してみてください。

次回は「CSSだけで作るタブ切り替え」もご紹介予定です！

関連記事