HTML5入門

構文

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

要点

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

サンプルコード

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

サンプル

<p><b>summary要素とは</b></p>
<details>
	<summary>概要</summary>
	<p>details要素によるディスクロージャー・ウィジェットの見出し（要約、説明）を表す要素。</p>
</details>
<details>
	<summary>カテゴリー</summary>
	<p>どのカテゴリーにも属さない。</p>
</details>
<details>
	<summary>コンテキスト</summary>
	<p>details要素の１つ目の子要素として使用できる。</p>
</details>