summaryタグ -detailsの見出しを定義する｜HTML辞典

<summary>タグとは？

<summary> タグは、<details> タグ内で開閉可能なタイトル（見出し）を定義するためのタグです。
ユーザーがクリックすると 詳細情報を開いたり閉じたり することができます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。

閉じタグの有無

<summary> は 開始タグ（<summary>）と閉じタグ（</summary>）の両方が必要 です。

基本的な記述方法

<details>
    <summary>詳細を表示</summary>
    <p>ここに詳細情報が表示されます。</p>
</details>

使用できる主な属性

<summary> タグには特別な属性はありませんが、<details> と組み合わせて使用します。

CSSを使ったデザイン変更

<summary> はデフォルトでクリック可能なスタイルが適用されていますが、カスタマイズすることも可能です。

summary {
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    background-color: #f0f0f0;
    border-radius: 4px;
}

適切な使用例

✅ FAQ 形式で詳細情報を開閉する

<details>
    <summary>配送はどのくらいかかりますか？</summary>
    <p>通常、ご注文から2〜3営業日以内に発送されます。</p>
</details>

✅ 技術仕様を折りたたむ

<details>
    <summary>技術仕様</summary>
    <p>この製品は最新のテクノロジーを使用しています。</p>
</details>

✅ <summary> のスタイルをカスタマイズする

<details>
    <summary style="color: blue; font-weight: bold;">クリックして詳細を見る</summary>
    <p>この文章はクリックすると表示されます。</p>
</details>

適切でない使用例（誤った使い方）

❌ <summary> を <details> の外に配置すると動作しない

<!-- NG: <details> の外に <summary> を記述 -->
<summary>詳細を表示</summary>
<details>
    <p>この内容は開閉できません。</p>
</details>

✅ 正しい書き方（<details> 内に配置）

<details>
    <summary>詳細を表示</summary>
    <p>クリックすると開閉できます。</p>
</details>

❌ <details> を使わずに <summary> のみを記述すると機能しない

<!-- NG: <summary> だけでは動作しない -->
<summary>クリックして開く</summary>
<p>この情報は表示されません。</p>

✅ 正しい書き方（<details> とセットで使用）

<details>
    <summary>クリックして開く</summary>
    <p>この情報はクリックすると表示されます。</p>
</details>

<summary>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<summary>	折りたたみ可能なタイトルを表示	<details> 内でのみ使用可能	FAQ、折りたたみメニュー
<details>	折りたたみ可能なコンテンツを定義	summary をクリックで開閉	補足情報、詳細説明
<h1>～<h6>	見出しを作成	折りたたみ機能なし	通常の見出し

使用上の注意点

✅ <summary> は <details> の直下に配置する

• <details> の外に配置すると機能しない。

✅ <summary> だけでは開閉機能は動作しない

• 必ず <details> とセットで使用する。

関連タグ

• <details> – 折りたたみ可能な詳細情報を提供
• <p> – 段落を作成
• <h1>～<h6> – 見出しを作成

まとめ

<summary> タグは、HTML文書内で クリックすると開閉できるタイトル（見出し）を定義するためのタグ です。
<details> とセットで使用し、FAQ や補足情報を簡単に表示できます。