HTML要素辞書 by Sentaro

<details>

詳細開示要素。ユーザーからの操作でコンテンツの表示・非表示を切り替えられる開閉ウィジェット（アコーディオン）を作成します。

info

概要

<details> 要素は、ユーザーがクリック操作などで開閉できる詳細情報ウィジェット（Disclosure Widget）を作成します。
この要素内に <summary> 要素を配置することで、常に表示される見出し（サマリー）を指定できます。<summary> がない場合、ブラウザはデフォルトの見出しを表示します。

play_circle

デモ (静的表示)

HTML (Source)

<details> <summary>よくある質問の回答はこちら</summary> 回答の詳しい情報がここに格納されています。ユーザーがクリックすると表示されます。 </details> <details open> <summary>最初から開いておく</summary> open属性により初期表示で開いています。 </details>

Preview (Result)

よくある質問の回答はこちら

回答の詳しい情報がここに格納されています。ユーザーがクリックすると表示されます。

最初から開いておく

open属性により初期表示で開いています。

list

属性 (Attributes)

属性名	説明
open	論理属性（値不要）。この属性が存在する場合、要素は初期状態で開いた状態（コンテンツが表示された状態）になります。

code

実用例

1. FAQ（よくある質問）リストとして使用

<details>
 <summary>
  Q1: 注文をキャンセルできますか？
 </summary>
 <p>
  A1: 発送手続き前であれば可能です。マイページからキャンセル処理を行ってください。
 </p>
</details>

<details>
 <summary>
  Q2: 支払方法を変更できますか？
 </summary>
 <p>
  A2: 申し訳ございませんが、注文確定後の支払方法の変更はできません。
 </p>
</details>

2. `

` 要素を使わない場合

<!-- <summary>要素がない場合、ブラウザがデフォルトの見出しを表示します -->
<details>
 <p>
  サマリーがないので、デフォルトの見出し（「詳細」など）が表示されます。
 </p>
</details>

lightbulb

知っておくべき重要事項

accessibility_new

アクセシビリティと構造
<details> と <summary> の組み合わせは、JavaScriptを使わずに開閉機能と適切なセマンティクス（WAI-ARIAのロールや状態）を提供します。これにより、スクリーンリーダーなどの支援技術で「開いている/閉じている」状態が正しく伝わり、アクセシビリティが向上します。

stylus_note

スタイルとカスタマイズ
デフォルトの開閉インジケーター（通常は三角形のマーク）は、CSSの list-style プロパティを使って非表示にしたり、カスタマイズしたりできます。

私について利用規約プライバシーポリシー