detailsタグ -折りたたみ式の情報を提供する｜HTML辞典

<details>タグとは？

<details> タグは、クリックすると開閉できる折りたたみ式の情報を提供するためのタグです。
FAQ や補足情報の表示に便利 で、JavaScript を使わずに簡単に実装できます。

気分

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

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

基本的な記述方法

<details>
    <summary>詳細を表示</summary>
    <p>ここに詳細情報を記述します。</p>
</details>

使用できる主な属性

<details> タグには、開閉の状態を制御する open 属性があります。

属性名	説明	例
open	デフォルトで開いた状態にする	<details open>

CSSを使ったデザイン変更

<details> と summary のスタイルはカスタマイズ可能です。

details {
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;
}

summary {
    font-weight: bold;
    cursor: pointer;
}

適切な使用例

✅ FAQ の折りたたみ表示

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

✅ 追加情報の表示

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

✅ <summary> を使わずに独自のボタンで開閉（JavaScript 必要）

<button onclick="document.getElementById('info').open = !document.getElementById('info').open;">
    詳細を表示
</button>
<details id="info">
    <p>カスタムボタンで制御された詳細情報</p>
</details>

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

❌ <summary> を記述しないとクリックできない

<!-- NG: summaryタグなし -->
<details>
    <p>ここに詳細情報を記述します。</p>
</details>

✅ 正しい書き方（<summary> を指定）

<details>
    <summary>詳細を表示</summary>
    <p>ここに詳細情報を記述します。</p>
</details>

❌ open 属性を適切に管理しないと UI が意図しない動作をする

<!-- NG: 必ず開いたままになっている -->
<details open>
    <summary>常に開いた状態</summary>
    <p>この情報は最初から開いています。</p>
</details>

✅ 正しい書き方（open を制御）

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

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

タグ	役割	特徴	適切な用途
<details>	折りたたみ可能な情報を表示	summary をクリックして開閉	FAQ、補足情報
<summary>	折りたたみのタイトル	<details> 内で使用	開閉用の見出し
<div>	ブロック要素のグループ化	開閉機能なし	スタイリングやレイアウト

使用上の注意点

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

• <summary> がないとクリックできない。

✅ open 属性でデフォルトの開閉状態を設定できる

• open を指定すると、ページ読み込み時に展開された状態になる。

関連タグ

• <summary> – <details> のタイトルを指定
• <div> – 汎用的なブロック要素
• <button> – JavaScript で制御する場合に使用

まとめ

<details> タグは、HTML文書内で クリックすると開閉できる折りたたみ式の情報を提供するためのタグ です。
FAQ や補足情報を簡単に表示でき、JavaScript なしで動作するのが特長です。