と
で折りたたみコンテンツを実装する

はじめに

FAQや注釈、長文の補足などを折りたたみ表示したい場面は多くあります。HTML標準の<details>と<summary>を使えば、JavaScriptなしでシンプルかつアクセシブルに実装できます。本記事では基本構造からデザイン調整、運用時の注意点までを整理します。

1. 基本構造

もっともシンプルな折りたたみは、<details>の中に見出し役の<summary>と本文を配置するだけで成立します。

<details>
  <summary>配送と返品について</summary>
  <p>通常3営業日以内に発送します。返品は到着から7日以内に承ります。</p>
</details>

<summary>は折りたたみヘッダーとして機能し、クリックやEnter/Spaceキー操作で開閉します。
<details open>のようにopen属性を付与すると、初期状態でコンテンツを展開できます。

2. FAQへの応用

複数の質問を並べる場合は、親セクションに見出しを付けて情報構造を明確にします。aria-labelledbyで見出しと関連付けると支援技術にも分かりやすい構造になります。

<section aria-labelledby="faq-title">
  <h2 id="faq-title">よくある質問</h2>

  <details>
    <summary>支払い方法は何に対応していますか？</summary>
    <ul>
      <li>クレジットカード</li>
      <li>銀行振込</li>
      <li>各種ウォレット決済</li>
    </ul>
  </details>

  <details>
    <summary>領収書は発行できますか？</summary>
    <p>マイページからダウンロード可能です。</p>
  </details>
</section>

3. アクセシビリティの要点

<summary>にはテキストで要点を簡潔に記述し、見出し要素の代用にしないのが望ましいです。
キーボード操作（Tab→Enter/Space）に対応しているため、スクリプトがなくても操作できます。
内容が長い場合は、開閉状態が分かるアイコンや背景色の変化をCSSで補強すると視覚的な手掛かりになります。

4. スタイリングの基本

ユーザーエージェントスタイルを上書きし、開閉状態に応じた装飾を設定すると視認性が高まります。

details {
  border: 1px solid #d6dee8;
  border-radius: 6px;
  padding: .75rem 1rem;
  background: #f8fbff;
}

details + details {
  margin-top: .75rem;
}

summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▶";
  display: inline-block;
  margin-right: .5rem;
  transition: transform .2s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details[open] {
  background: #eef5ff;
}

5. ネストと一括開閉の設計

段階的に情報を提示したい場合は入れ子構造も可能ですが、深すぎるネストは可読性を損ないます。2階層程度を目安に抑えましょう。

<details>
  <summary>配送について</summary>
  <p>国内外の配送に対応しています。</p>
  <details>
    <summary>海外配送の注意点</summary>
    <p>関税や現地税が発生する場合があります。</p>
  </details>
</details>

「同時に一つだけ開く」など厳密な制御が必要な場合は、軽量なJavaScriptでopen属性を管理する方法も検討します。

6. 既存パターンとの置き換え

既存のアコーディオンをJavaScriptで実装している場合でも、要件がシンプルであれば<details>へ置き換えることでコード量とバグ要因を減らせます。制御が複雑なケースでは、open属性を操作する補助スクリプトで標準機能を拡張します。

7. SEOとパフォーマンスの観点

折りたたみ内のテキストもDOM上に存在するため、検索エンジンのインデックス対象になります。
初期表示を軽くしたい長文は<details>に収めて視覚的な負荷を抑えつつ、重要な要約は折りたたみ外に配置しておきます。

8. よくある落とし穴

<summary>内にボタンやリンクなどフォーカス可能要素を多用すると操作が煩雑になります。ヘッダーは簡潔なテキストにまとめましょう。
クリック領域が狭いと開閉しづらくなるため、summary { display: block; padding: ... }などで余白を確保します。
デフォルトマーカーを消した場合は、アイコンの回転や「開く／閉じる」テキストなど開閉状態を示す視覚サインを必ず追加します。

まとめ

<details>と<summary>だけでシンプルかつアクセシブルな折りたたみUIを構築できる。
CSSで開閉状態の視覚サインを補強するとユーザー体験が向上する。
複雑な制御が不要なケースでは、JavaScript実装よりも保守性の高い選択肢になる。

と

は標準機能だけで十分に使える折りたたみUIを提供します。まずはFAQや注釈から導入し、必要に応じてCSSで視覚的な手掛かりを補いましょう。複雑な要件がなければ、スクリプトに頼らず簡潔で保守性の高い実装が可能です。

<details>と<summary>で折りたたみコンテンツを実装する

とで折りたたみコンテンツを実装する