MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

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

コンテンツカテゴリー フローコンテンツ、セクショニングルート、インタラクティブコンテンツ、パルパブルコンテンツ
許可された内容 1 つの <summary> 要素と、それに続く フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツ を受け入れるすべての要素
許可された ARIA ロール なし
DOM インターフェイス HTMLDetailsElement

属性

他のすべての 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';
}

表示結果

仕様

仕様書 策定状況 コメント
HTML Living Standard
<details> の定義
現行の標準  
HTML 5.1
<details> の定義
勧告  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 12 開発中 49.0 (49.0) 未サポート 15 6
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 4.0 開発中 49.0 (49.0) 未サポート 未サポート 6.1

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, hamasaki, ethertank
 最終更新者: yyss,