| 項 目 | 説 明 |
|---|---|
| 記述形式 | <details>～</details> |
| 対応ブラウザー | H?+ / e?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 種 類 （カテゴリー） |
フロー・コンテンツ， セクショニング・ルート ， インタラクティブ・コンテンツ，パルパブル・コンテンツ |
| 置ける場所 | フロー・コンテンツが記入できる場所 |
| 内包要素 （コンテンツ・モデル） |
１つの summary 要素 とそれに続く フロー・コンテンツ （コンテンツ・モデル: カテゴリーと直接指定） |
<details> は，普段は非表示の，しかし，ユーザが詳細表示をしたいときだけ表示される要素 を記述します。 通常は，summary 要素 で記述した 概要のみが表示 され，ブラウザーがサポートする何らかの 詳細表示ボタンを押したとき詳細情報が表示 されます。
HTML5 では，新規導入の要素として検討が行われましたが，最終的には採用は見送られました。
しかし，HTML5.1 で再検討の結果，導入が決定されました。
| 種 類 | 名 称 |
|---|---|
| 【固有属性】 | open ** |
| 【グローバル属性】 | accesskey，class，contenteditable *，
dir， hidden *，id， lang，spellcheck *，style， tabindex，title，translate * |
| 【ARIA role属性】 で 指定可能な値 （役割） |
任意の値 （役割） |
| 【ARIA aria-* 属性】 で 指定可能なもの |
ARIA グローバル状態とプロパティ， 指定可能な役割の任意の状態とプロパティ |
| 種 類 | 名 称 |
|---|---|
| 【よく使うもの】 |
次の例では，進捗状況の詳細を示すデータを隠すために details 要素 が用いられています。
| HTMLソース | |
|---|---|
| HTML <body> ～ </body> |
<section class="progress window">
<h1>コピー中： "あなたの少年時代の夢を本当にかなえる"</h1>
<details>
<summary>コピー中...
<progress max="375505392" value="97543282"></progress> 25%
</summary>
<dl>
<dt>転送速度:</dt> <dd>452KB/s</dd>
<dt>転送元ファイル名:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>転送先ファイル名:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>経過時間:</dt> <dd>01:16:27</dd>
<dt>カラープロファイル:</dt> <dd>SD (6-1-6)</dd>
<dt>画面サイズ:</dt> <dd>320×240</dd>
</dl>
</details>
</section> |
| ブラウザー 表示例 （未対応ブラウザーでは正常に表示できません） |
|---|
コピー中： "あなたの少年時代の夢を本当にかなえる"コピー中... 25%
|
次の例では，details 要素 を用いて，どのように既定の状態で入力コントロールを非表示にするかを示しています。
| HTMLソース | |
|---|---|
| HTML <body> ～ </body> |
<div style="text-align: left;">
<details>
<summary><label for="fn">名前と詳細:</label></summary>
<p><input type="text" id="fn" name="fn"
value="Pillar Magazine.pdf"></p>
<p><label><input type="checkbox"
name="ext" checked> 詳細を非表示</label></p>
</details>
</div> |
| ブラウザー 表示例 （未対応ブラウザーでは正常に表示できません） |
|---|
|