--- title: '
: 詳細折りたたみ要素' slug: Web/HTML/Element/details tags: - HTML - HTML 対話的要素 - 'HTML:フローコンテンツ' - 'HTML:対話型コンテンツ' - 'HTML:知覚可能コンテンツ' - details - ウェブ - リファレンス - 要素 translation_of: Web/HTML/Element/details ---
{{HTMLRef}}

HTML の詳細折りたたみ要素 (<details>) は、ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは {{HTMLElement("summary")}} 要素を使用して提供することができます。

折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <details> 要素の最初の子要素が <summary> の場合は、 <summary> 要素が折りたたみウィジェットのラベルとして使用されます。

{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-shorter")}}

メモ: ウィジェットの開閉を回転する (ねじる) 三角形で表すのが一般的な使い方なので、このウィジェットはツイスティー (twisties) と呼ばれることがあります。

<details> ウィジェットは2つの状態のうち1つを取ります。既定の閉じた状態は <summary> を使用して指定されたラベル文字列 (または{{Glossary("user agent", "ユーザーエージェント")}}が定義した既定の文字列) とウィジェット自身による三角形だけを表示します。これは次のように表示されます。

閉じた <details> ウィジェットのスクリーンショット。黒い左向きの三角形が「System Requirements」のテキストの右側にあります。

ここでは既定の閉じた状態であり、折りたたみウィジェットと "System Requirements" というラベルが表示されています。ユーザーがこのウィジェットをクリックするか、フォーカスしてスペースバーを押すと、「ねじれて」開き、コンテンツが展開されて次のようになります。

開いた <details> ウィジェットのスクリーンショット。三角形は下向きになり、「System Requirements」とは何かの詳細説明が表示されています。” means is shown.

ここから、 CSS を使用して折りたたみウィジェットの外見を変更することができ、また {{htmlattrxref("open", "details")}} の値を設定したり削除したりすることにより、プログラムから開いたり閉じたりすることができます。

ウィジェットが閉じている時、折りたたみの三角形と概要が表示できるだけの高さしかありません。ウィジェットが開くと、要素は中に含まれた詳細が表示できるだけの大きさに拡大されます。

メモ: 残念なことに、現時点では開いたり閉じたりする間のアニメーションを行う組込みの方法はありません。

完全な標準互換の実装では、 CSS の {{cssxref("display")}}: list-item が自動的に {{HTMLElement("summary")}} に適用されます。この表示方法はカスタマイズすることができます。詳しくは{{anch("Customizing the disclosure widget", "折りたたみウィジェットのカスタマイズ")}}を参照してください。

コンテンツカテゴリ フローコンテンツ、区分化ルート、対話型コンテンツ、知覚可能コンテンツ
許可されている内容 1つの {{HTMLElement("summary")}} 要素と、それに続く フローコンテンツ
タグの省略 {{no_tag_omission}}
許可されている親要素 フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール なし
DOM インターフェイス {{domxref("HTMLDetailsElement")}}

属性

この要素はグローバル属性を持ちます。

{{htmlattrdef("open")}}
この論理属性は、ページ読み込み時に詳細内容、つまり <details> 要素の内容が表示されるよう指定するものです。既定値は false であり、詳細内容は表示しません。

イベント

HTML で対応している通常のイベントに加えて、 <details> 要素は {{event("toggle")}} イベントに対応しており、開閉状態が変化するたびに <details> 要素が呼び出されます。イベントは状態が変化した後に送信され、もしブラウザーがイベントを送信する前に状態が2回以上変化しても、イベントは合体して1回しか送信されません。

ウィジェットの状態が変化したことを検出するために、 toggle イベントをリスンすることができます。

details.addEventListener("toggle", event => {
  if (details.open) {
    /* 要素が開いた方に切り替わった */
  } else {
    /* 要素が閉じた方に切り替わった */
  }
});

例

単純な折りたたみの例

この例では <details> 要素を summary なしで表示します。

<details>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

このような場合、ブラウザーは既定の概要文字列（ふつうは「概要」）を使用します。あなたのブラウザーでは次のように表示されます。

{{EmbedLiveSample("A_simple_disclosure_example", 650, 150)}}

概要の提供

この例では <details> の中で {{HTMLElement("summary")}} 要素を使用して、上記の例に概要を追加したものです。次のようになります。

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

この HTML の結果は次のようになります。

{{EmbedLiveSample("Providing_a_summary", 650, 150)}}

折りたたみボックスの作成

<details> ボックスを開いた状態にするために、論理値の open 属性を追加しましょう。

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

これだけで、次のような結果になります。

{{EmbedLiveSample("Creating_an_open_disclosure_box", 650, 150)}}

表示方法のカスタマイズ

では、いくらか CSS を適用して折りたたみボックスの外見をカスタマイズしましょう。

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

結果

{{EmbedLiveSample("Customizing_the_appearance", 650, 150)}}

折りたたみウィジェットのカスタマイズ

折りたたみの三角形ウィジェット自身はカスタマイズできますが、これは最近標準化され、広くは対応されていません。さらに、この対応方法については複数の種類があり、標準はそれに基づいて決定されましたので、しばらくの間はカスタマイズのために複数の方法を使用する必要があります。

{{HTMLElement("summary")}} 要素は {{cssxref("list-style")}} 一括指定プロパティや、 {{cssxref("list-style-type")}} などの個別指定プロパティに対応しており、折りたたみウィジェットを三角形から選択したものに変更することができます (ふつうは {{cssxref("list-style-image")}}) を使用します。例えば、折りたたみウィジェットのアイコンは list-style: none と設定することで削除することができます。

しかし、 Chrome はまだこれに対応していませんので、このブラウザーでは外見をカスタマイズするために、非標準の ::-webkit-details-marker 疑似要素を使用する必要があります。

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

結果

{{EmbedLiveSample("Customizing_the_disclosure_widget", 650, 150)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '<details>')}} {{Spec2('HTML5.1')}} Initial definition

ブラウザーの互換性

{{Compat("html.elements.details")}}

関連情報