detailsタグ
detailsは、備考や詳細情報を表すタグです。
解説
detailsタグで作成したテキストは、一般的なブラウザではアコーディオン形式（初期表示は折りたたまれていてクリックすると表示される）で表示されます。
タイトルを指定したい場合は、summaryタグを使用します。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ インタラクティブ・コンテンツ |
| コンテキスト (親カテゴリ) | フロー・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | summaryタグ フロー・コンテンツ |
属性
detailsタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
detailを使ったサンプル（タイトルなし）
<details>
<p>ここはびこう欄です。</p>
</details>
ここはびこう欄です。
タイトルを省略した場合、タイトルは「詳細」になります。
detailを使ったサンプル（タイトルあり）
<details>
<summary>備考</summary>
<p>ここはびこう欄です。</p>
</details>
備考
ここはびこう欄です。
入れ子にしたサンプル
<details>
<summary>備考１</summary>
<p>ここはびこう欄１です。</p>
<details>
<summary>備考２</summary>
<p>ここはびこう欄２です。</p>
</details>
</details>
備考１
ここはびこう欄１です。
備考２
ここはびこう欄２です。
備考
- summaryタグでのタイトルを省略した場合のタイトルは「詳細」になります。
