details 要素

HTML <details> 要素は、ユーザーに追加の詳細情報を提供する「ディスクロージャー・ウィジェット」を表します。

属性

他のすべての HTML 要素と同様に、この要素は グローバル属性 を持ちます。

open

この論理属性はページ読み込み時に詳細内容が表示されるよう指定するものです。既定値は false であり、詳細内容は表示しません。

例

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>

ライブサンプル

スタイル設定例

より新しい仕様に従って、Firefox は summary 要素を display: list-item にして、リストアイテムと同じ方法でマーカーのスタイル設定を可能にしました。以前の仕様に従う Chrome および Safari には、スタイル設定が可能な独自の疑似要素 ::-webkit-details-marker があります。

ブラウザー間で互換性があるスタイル設定は、summary { display: block } を設定して Firefox のマーカーを隠す、および ::-webkit-details-marker {display: none;} を設定して Chrome と Safari のマーカーを隠すことです。そして、必要なスタイルに適した方法を適用できます。以下の例では、CSS generated content を使用してマーカーを再び追加しています。

HTML

<details>
  <summary>Some details</summary> 
  <p>More info about the details.</p> 
</details>

CSS

summary {
  display: block;
}

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

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

表示結果

仕様

ブラウザー実装状況

関連情報

• <summary>