CSSだけでアコーディオンUIを作る

2024-07-06

アコーディオンUI（ユーザーインターフェース）は、ウェブページで情報をコンパクトに表示するための便利な要素です。

タイトルをクリックするとコンテンツが開閉するというものです。

特にFAQやコンテンツのカテゴリ別表示に適しており、ユーザーが効率よく情報を参照できるようになります。

進化した最新のCSSアコーディオンUI

javascriptを使用する場合との比較

HTMLとCSSだけでアコーディオンUIを作成する利点は以下のようになります。

JavaScriptを使用しないため、軽量でシンプル。
基本的な機能は十分に実現できる。
依存関係が少ないため、セキュリティリスクが低い。

完成コード

<div class="accordion">
  <dl>
    <dt>
      <input type="checkbox" id="section1" class="accordion-toggle">
      <label for="section1" class="accordion-label">セクション1</label>
    </dt>
    <dd class="accordion-content">
      <p>セクション1の内容です。</p>
    </dd>
  </dl>
  <dl>
    <dt>
      <input type="checkbox" id="section2" class="accordion-toggle">
      <label for="section2" class="accordion-label">セクション2</label>
    </dt>
    <dd class="accordion-content">
      <p>セクション2の内容です。</p>
    </dd>
  </dl>
  <dl>
    <dt>
      <input type="checkbox" id="section3" class="accordion-toggle">
      <label for="section3" class="accordion-label">セクション3</label>
    </dt>
    <dd class="accordion-content">
      <p>セクション3の内容です。</p>
    </dd>
  </dl>
</div>

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

.accordion dl dt input {
  display: none;
}

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

.accordion dl dd {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  padding: 0 10px;
  background: #fff;
}

.accordion dl dt:has(input:checked) + dd {
  max-height: calc(infinity * 1px);
  opacity: 1;
  padding: 10px;
}

.accordion {
  > dl {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;

    > dt {
      > input {
        display: none;
      }

      > label {
        display: block;
        padding: 10px;
        background: #f5f5f5;
        cursor: pointer;
        font-weight: bold;
      }
    }

    > dd {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, opacity 0.5s ease;
      padding: 0 10px;
      background: #fff;
    }

    > dt:has(input:checked) + dd {
      max-height: calc(infinity * 1px);
      opacity: 1;
      padding: 10px;
    }
  }
}

セクション1: セクション1の内容です。

セクション2: セクション2の内容です。

セクション3: セクション3の内容です。

解説

<div class=”accordion”>: アコーディオン全体を囲みます。
わかりやすくなるように囲んでいるだけで、特別な意味は持っていません。
<dl>: 各アコーディオンのボタンと開閉する中身を囲みます。
dlタグで区切ることで、横並びにしたい時などに管理が簡単になります。
<input type=”checkbox”>: 各アコーディオンを開くのか閉じるのか、それをチェックボックスのオンオフで判断します。
CSSで非表示にしておきます。
CSSで非表示にしてもチェックボックスは無くなってはいないので、labelをクリックすることでオンオフを切り替えることができます。
<label>: アコーディオンのボタンとなる文字列や画像などを囲みます。
この部分をクリックすることでチェックボックスのオンオフが切り替わります。
<dd>: アコーディオンの開閉する本体部分を囲みます。
初期表示では最大高さをゼロにしておくことで、疑似的に非表示にします。
透明度を設定していることに疑問を感じるかもしれません。
CSSでアニメーションを設定する場合は、透明度を設定する必要があるからです。
<dt:has(input:checked) + dd>: ここがこのアコーディオンの肝になります。
:has()という疑似要素が2023年12月から使用できるようになりました。
これによって今まではjavascriptを使うことでしかできなかった、HTML要素の親を指定できるようになりました。
そしてチェックボックスがオンの場合にのみ、直後（正確には親要素の弟要素）に記述してあるdd要素の最大高さをゼロから無限大（infinity * 1px）にすることで、アコーディオンを開くことを実現しています。
最大高さが無限大になっても、上限が無限なだけで、実際の高さは囲まれているコンテンツの高さになるので安心してください。