summary

タグの概要

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タグは必須ではありませんが、アクセシビリティ向上のために適切に使用することが重要です。また、サマリーがない場合、一部のブラウザでは空白が表示されることがあります。