HTML5入門

構文

<details>
	<p>詳細情報。</p>
</details>

<details>
	<summary>見出し</summary>
	<p>詳細情報。</p>
</details>

要点

• details要素は、ユーザーのリクエストに応じ詳細情報を表示するディスクロージャー・ウィジェットを表す要素である。
• ディスクロージャー・ウィジェットとは、ユーザーが表示/非表示を切り替えられるユーザー・インターフェース（UI）のこと。
• details要素の１つ目の子要素としてsummary要素を配置し、詳細情報が非表示の状態でも表示しておく見出し（要約、説明）を指定できる。
• details要素は、HTML5にて新たに導入された要素である。

属性

サンプルコード

<details>
	<summary>見出し１</summary>
	<p>詳細情報。</p>
</details>
<details>
	<summary>見出し２</summary>
	<p>詳細情報。</p>
</details>

サンプル

<p><b>details要素とは</b></p>
<details>
	<p>ユーザーのリクエストに応じ詳細情報を表示するディスクロージャー・ウィジェットを表す要素。</p>
</details>
<details>
	<summary>カテゴリー</summary>
	<p>フロー・コンテンツ、セクショニング・ルート、インタラクティブ・コンテンツ、パルパブル・コンテンツ。</p>
</details>
<details>
	<summary>コンテキスト</summary>
	<p>フロー・コンテンツを内包できる要素内で使用できる。 </p>
</details>