【CSS】JavaScript不要！CSSだけで実装トグル式アコーディオンの作り方

WEBサイトで「アコーディオン」といえば、クリックするとパネルが開閉するUIの定番パターンですね。
多くの場合、JavaScriptと組み合わせて実装することがほとんどだと思います。
でも、CSSだけでもシンプルなアコーディオンを実装できるのをご存じですか？
今回は、CSSの:checked擬似クラスと、+セレクタを活用して、JavaScriptなしでトグル式アコーディオンを実装する方法をご紹介します！

こんな方におすすめ

JSなしで軽量にUIを実装したい
HTMLとCSSだけでサクッとアコーディオンを作りたい
初心者だけど、コード付きで理解したい

実際にこのような画像のような「アコーディオン」コンテンツを作成することができます。

HTMLソース（基本形）

<label class="accordion-label">
  <input type="checkbox" class="accordion-toggle">
  <span class="accordion-title">Q. アコーディオンって何？</span>
  <div class="accordion-content">
    アコーディオンは、クリックで開閉するUIパターンです。
  </div>
</label>

CSS（基本形）

.accordion-label {
  display: block;
  cursor: pointer;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  padding: 1em;
  border-radius: 5px;
}

.accordion-toggle {
  display: none;
}

.accordion-title {
  font-weight: bold;
  display: block;
}

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

.accordion-toggle:checked + .accordion-title + .accordion-content {
  max-height: 200px; /* 適宜調整 */
}

実装のポイント

input[type=”checkbox”] を使ってトグルの状態を記憶

チェックのON/OFFをCSSで判定可能
:checked 擬似クラスで条件分岐が可能

+セレクタで次の要素に影響を与える
ここがポイント：+セレクタを使うことで、チェックされたら、2つ後ろの .accordion-content にCSSを与えることができます。ここで max-height を付与して展開させるアコーディオンの動きが実装できます。

.accordion-toggle:checked + .accordion-title + .accordion-content

応用：複数アコーディオンを並べたい場合

各アコーディオンごとに異なるIDを使って、labelとinputを関連付けることでグループ化も可能です。
inputのidとlabelのfor属性で結びつければ、マークアップの自由度も上がります。

HTMLソース

<div class="accordion">
  <div class="accordion-item">
    <input type="checkbox" id="ac1" class="accordion-toggle">
    <label for="ac1" class="accordion-title">Q1. CSSだけでアコーディオンは作れますか？</label>
    <div class="accordion-content">
      はい、できます！チェックボックスと疑似クラスを組み合わせて実現できます。
    </div>
  </div>

  <div class="accordion-item">
    <input type="checkbox" id="ac2" class="accordion-toggle">
    <label for="ac2" class="accordion-title">Q2. JavaScriptとの違いは？</label>
    <div class="accordion-content">
      簡易的な用途にはCSSのみで十分ですが、複雑な制御や状態管理はJSが得意です。
    </div>
  </div>

  <div class="accordion-item">
    <input type="checkbox" id="ac3" class="accordion-toggle">
    <label for="ac3" class="accordion-title">Q3. 複数開けますか？</label>
    <div class="accordion-content">
      はい、チェックボックス形式なので複数同時に開閉可能です。
    </div>
  </div>
</div>

CSS

.accordion {
  max-width: 600px;
  margin: 2em auto;
  font-family: sans-serif;
}

.accordion-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 1em;
  overflow: hidden;
}

.accordion-toggle {
  display: none;
}

.accordion-title {
  display: block;
  padding: 1em;
  font-weight: bold;
  background-color: #f7f7f7;
  cursor: pointer;
  position: relative;
}

.accordion-title::after {
  content: "＋";
  position: absolute;
  right: 1em;
  font-size: 1.2em;
  transition: transform 0.3s;
}

.accordion-toggle:checked + .accordion-title::after {
  content: "−";
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 1em;
  background-color: #fff;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.accordion-toggle:checked + .accordion-title + .accordion-content {
  max-height: 200px;
  padding: 1em;
}

CSSアコーディオン実装時の注意点

開閉状態を保持できない：
ページを再読み込みすると、アコーディオンはすべて閉じた状態に戻ります。状態の保持が必要な場合はJavaScriptの導入が必要です。
アクセシビリティ（a11y）には注意が必要：
aria-expanded や role=”region” などを併用しないと、スクリーンリーダーには適切に伝わらない可能性があります。
アニメーションに制約がある：
max-height を使ったアニメーションは、コンテンツ量に応じて調整が必要です（高さが足りないと途中で切れる）。
表示切替には display: none を使用しない：
display: none はSEO的にもコンテンツが無視されることがあるため、max-height での非表示が推奨されます。
ラベルとチェックボックスのIDが正しく対応していないと動作しない：
label の for 属性と input の id 属性は一致していなければなりません。
古いブラウザでは非対応の可能性：
IE11以前やレガシー環境では :checked や transition の挙動が不安定なことがあります。

CSSだけでトグル式アコーディオンを作るのは意外と簡単。
JavaScriptが使えない場面や、できるだけ軽量にUIを構築したいときにおすすめのテクニックです。