これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
HTML の詳細 要素 (<details>) は、ユーザに追加の詳細情報を提供する「ディスクロージャー・ウィジェット」を表します。
| コンテンツカテゴリ | フローコンテンツ、セクショニングルート、インタラクティブコンテンツ、パルパブルコンテンツ |
|---|---|
| 許可された内容 | 1 つの <summary> 要素と、それに続くフローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フローコンテンツを受け入れるすべての要素 |
| DOM インターフェイス | HTMLDetailsElement |
属性
他の全ての HTML 要素と同様に、この要素はグローバル属性を持ちます。
open- この論理属性はページ読み込み時に詳細内容が表示されるよう指定するものです。既定値は
falseであり、詳細内容は表示しません。
例
<details> <summary>Some details</summary> <p>More info about the details.</p> </details>
ライブサンプル
注記: ライブサンプルが動作しない場合はブラウザ実装状況で、使用しているブラウザがこの機能をサポートしているかを確認してください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <details> の定義 |
現行の標準 | |
| HTML5.1 <details> の定義 |
草案 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | MS Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本サポート | 12 | 49.0 (49.0)[1] | 未サポート | 検討中 | 15 | 6 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 4.0 | 49.0 (49.0)[1] | 未サポート | 未サポート | 未サポート |
[1] この機能は Firefox 47 から使用できますが設定項目 dom.details_element.enabled で制御しており、Nightly および Aurora バージョンを除き既定値は false です。 (バグ 1241750)。Firefox 49.0 より、この機能がデフォルトで有効になります。すなわち、設定項目の既定値が true になります (バグ 1226455)。