details要素とsummary要素は何を提供しますか？

Question

Accepted Answer

`

`と`

`は、**ネイティブディスクロージャウィジェット**を作成します — 展開可能/折りたたみ可能なセクション — **ゼロJavaScript**で。ブラウザがトグル、キーボードサポート、アクセシビリティを処理します。 ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** はクリック可能なラベル（最初の子要素）です。 - その後のすべてが折りたたみ可能なコンテンツです。 - summaryをクリックするとネイティブに開く/閉じるを切り替えます — キーボードでアクセス可能（Enter/Space）でスクリーンリーダーによって正しく読み上げられます。 ## デフォルトで開く & 状態を検出する ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## マーカーのスタイリング ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## 実際のユースケース FAQアコーディオン、"もっと表示"セクション、折りたたみ可能なサイドバー、スポイラーテキスト、展開可能なテーブル行。この要素の前は、すべてのアコーディオンがJavaScriptとアクセシビリティ用のARIAワイアリングが必要でした — 今は2つのセマンティックタグです。 ## なぜ重要なのか `

`/`

`は、JSもマニュアルARIAもなく、アクセス可能でキーボード対応の折りたたみ可能なコンテンツを提供します — プラットフォームを使用する完全な例です。カスタムアコーディオンを作成する前に、FAQと"もっと表示"パターンに使用してください。