この記事の目次
details と summary の使い方とは
<details> は、開閉できる「折りたたみ」の領域を作る要素で、最初の子要素の <summary> が見出し（クリックできる部分）になります。JavaScriptもCSSも使わずに、FAQ（よくある質問）や補足説明の折りたたみを実装できます。
MDN によると、details は2020年1月から主要ブラウザで広く使える（Baseline: Widely available）機能です。また name 属性で複数の details を「同時に1つだけ開く」アコーディオンにでき、これは比較的新しい機能です（MDN の互換性データでは Chrome 120、Safari 17.2、Firefox 130 以降）。
基本（構文・仕組み）
基本形は次のとおりです。
<details>
<summary>見出し(クリックで開閉)</summary>
<p>隠れている内容</p>
</details>
押さえる属性・性質です。
| 項目 | 内容 |
|---|---|
| open 属性 | 付けると初期状態で開く。真偽値属性なので open="false" でも開く |
| name 属性 | 同じ値を持つ details のうち、同時に開けるのは1つ(排他) |
| toggle イベント | 開閉の状態が変わったときに発火 |
| summary の位置 | details の最初の子要素であること |
| 暗黙のロール | group。role 属性は付けられない |
summary の中には、文章レベルの要素（必要なら見出し）を置けます。ただし MDN は、summary に既定で button ロールを割り当てるブラウザでは子要素のロールが取り除かれ、中の見出しがスクリーンリーダーで見出しとして扱われない場合があるとして、使うなら複数の環境でのテストを促しています。
サンプルコード（実行結果つき）
排他的なFAQの例です。
<details name="faq" open>
<summary>Q1 送料は?</summary>
<p>A1 全国一律です。</p>
</details>
<details name="faq">
<summary>Q2 返品は?</summary>
<p>A2 7日以内です。</p>
</details>
<details name="faq">
<summary>Q3 支払いは?</summary>
<p>A3 カードです。</p>
</details>
マーカー（三角形）を「+」「−」にするCSSです。
summary { cursor: pointer; }
summary::marker { content: "+ "; }
details[open] summary::marker { content: "− "; }
Safari 向けの古い指定や、独自アイコンを使う場合は、次のようにします(MDN の例)。
summary { list-style: none; }
summary::after { content: "+"; }
details[open] summary::after { content: "−"; }
動作確認（検証環境と結果）
- 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系、
render.ps1）。 - 確認内容: 上記のFAQ(Q1 が
open)を読み込み、JSで2つ目のopenをtrueにして、3つのopen状態を取得。 - 結果:
false,true,falseとなり、Q1 が自動で閉じて Q2 だけが開く排他動作を確認しました。 - 追加確認: Q3 の
summaryをclick()するとfalse,false,trueになり、クリックでも排他動作になりました。open="false"と書いたdetailsのopenはtrue（開いた状態）、toggleイベントは非同期に発火しました。summary::markerのcontentは開いた状態で"− "が適用されていました。 - 未検証: 実際のマウス・キーボード(Enter・Space)での開閉、他ブラウザ(Safari・Firefox)での排他動作。
- ログ:
C:Tempks2techtestsdetails-summary.md。
details と summary の使い方の注意点
- 閉じている間の内容は、ページ内検索(Ctrl+F)での見つかり方がブラウザにより異なる場合があります(この記事では未検証)。重要な情報は閉じたままにしないほうが安全です。
- アニメーションは標準では付きません。開閉の滑らかさが必要な場合は、新しいCSS機能やJSを使いますが、この記事では未検証です。
- FAQ用に構造化データを併用する場合は、本文に表示された内容と構造化データを一致させます。
- 印刷時、閉じたままの内容は通常出力されません（ブラウザの印刷設定でも変わるため、この記事では未検証です）。
details と summary の使い方でよくあるミス
open="false"と書いて閉じたつもりになる（属性を削除する必要があります）。summaryをdetailsの最初の子にしていない。summaryの中にボタンやリンクなどの操作要素を入れる（開閉操作と衝突します）。nameを付け忘れて、複数が同時に開いてしまう。- カスタムのアコーディオンを
div+ JS で作り、キーボード操作やロールが欠ける。
ブラウザ対応・バージョン
details・summary は MDN の記載では2020年1月から主要ブラウザで広く使えます。name 属性による排他制御は後から追加された（Chrome 120、Safari 17.2、Firefox 130。2026年10月時点の MDN 互換性データ）ため、古いブラウザでは単に「複数同時に開く」動作になります。重要な操作はそれでも成立するように設計し、対応の最新は MDN の互換性表で確認してください。
details と summary の使い方のチェックリスト
- [ ]
summaryをdetailsの最初の子にしている。 - [ ] 初期状態を開くときは
openを付け、閉じるときは付けない。 - [ ] 排他にしたいなら同じ
nameを付けている。 - [ ]
summaryに分かりやすい文言を入れている。 - [ ] 重要な内容が閉じたままで見落とされないか確認した。
details と summary の使い方のFAQ（よくある質問）
Q. JavaScriptで開閉状態を取得できますか。
A. details.open が真偽値で取得でき、toggle イベントで変更を検知できます。
Q. アコーディオンはいつ details で、いつ ARIA で自作すべきですか。
A. 基本は details で十分です。動きの制御が複雑な場合に限り、自作を検討します。
Q. details の中に details を入れられますか。
A. 入れられます。ただし入れ子が深いと分かりにくいため、1階層程度に留めます。
筆者の見解（details と summary の使い方）
私見では、FAQやちょっとした補足の折りたたみは、まず details で書いてみるのが最も費用対効果が高いと考えます。JSのアコーディオンを自作すると、フォーカスやキーボード、ロールの対応が漏れがちです。デザインの制約が大きい場合でも、summary::marker や list-style: none で見た目を変えられる範囲は広いので、先に標準でどこまで実現できるかを試すことをおすすめします。
