タグの概要
summaryタグは、details要素内に使用されるタグであり、折り畳み可能な要素の概要やキャプションを提供します。
詳細情報を表示する前に、要素のサマリーを提供する際に使用されます。
基本の書き方(構文)
<details>
<summary>ここにサマリーが入ります</summary>
詳細情報など
</details>
使用例(具体的なコード)
<details>
<summary>クリックして詳細を表示</summary>
<p>ここに詳細情報が入ります</p>
</details>
<details>
<summary>クリックして表示/非表示</summary>
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
</details>
<details>
<summary>クリックして詳細を見る</summary>
<img src="image.jpg" alt="イメージ">
</details>
よくある注意点・間違い
summaryタグは必須ではありませんが、アクセシビリティ向上のために適切に使用することが重要です。また、サマリーがない場合、一部のブラウザでは空白が表示されることがあります。