HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<summary>
概要（Summary）要素。<details>要素内のコンテンツの開閉ボタンとして表示される見出し（概要）を定義します。
info
概要
<summary> 要素は、<details> 要素の子要素として使用され、その $\text{details}$ 要素に含まれる情報群に対する概要、見出し、またはラベルを定義します。ユーザーがこの $\text{summary}$ 部分をクリックすると、非表示になっていた $\text{details}$ 要素の残りのコンテンツが表示（展開）されます。
play_circle
デモ (静的表示)
HTML (Source)
<details open>
<summary>クリックで開閉する見出し</summary>
<p>このコンテンツが詳細情報です。</p>
</details>
<br><br>
<details>
<summary class="button-link">
ボタンスタイルの見出し
</summary>
<p>詳細は非表示になっています。</p>
</details>
Preview (Result)
クリックで開閉する見出し
このコンテンツが詳細情報です。
ボタンスタイルの見出し
詳細は非表示になっています。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| なし | <summary> 要素に固有の属性はありません。グローバル属性（class, idなど）のみ使用可能です。 |
code
実用例
1. よくある質問 (FAQ) 形式での使用
<details>
<summary>
Q. サービスの料金体系はどうなっていますか？
</summary>
<p>
A. 基本プランは月額1,000円からご利用いただけます。
</p>
</details>
2. 既定で開いた状態にする
<details open>
<summary>既定で表示されているセクション</summary>
<p>このコンテンツはページロード時に表示されます。</p>
</details>
3. summary内に他のインライン要素を含める
<details>
<summary>
重要な情報の <span style="color: red;">概要</span>
</summary>
<p>詳細な情報は隠されています。</p>
</details>
lightbulb
知っておくべき重要事項
description
必須の親要素
<summary> 要素は、必ず <details> 要素の最初の子要素として配置する必要があります。 $\text{details}$ 要素内に $\text{summary}$ 要素がない場合、ブラウザは既定の見出しを提供します。
accessibility_new
アクセシビリティ
<summary> は、見出しとして機能するため、内容はそのセクションの概要を正確に伝えるものにすべきです。スクリーンリーダーは $\text{summary}$ をボタンのように扱い、その情報を読み上げます。