<details>
<details> 要素は、ユーザーが操作して表示・非表示を切り替えられる追加情報のウィジェットを作成します。
概要
<details> 要素は、ユーザーが操作して表示・非表示を切り替えられる追加情報のウィジェットを作成します。
対応ブラウザ
デスクトップ
Chrome 12+
Edge 79+
Safari 6+
Firefox 49+
モバイル
Chrome Android 18+
Safari iOS 6+
Firefox Android 49+
基本構文
HTML
<details>
<summary>詳細を表示</summary>
<p>ここに隠れたコンテンツが入ります。</p>
</details>
<details open>
<summary>最初から開いている</summary>
<p>open 属性で初期状態を開いた状態にできます。</p>
</details> 実務での使いどころ
-
<details> の活用
ユーザーが開閉できる詳細情報ウィジェット。アコーディオンUIに使用。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。