<details> - 略語

トップ > HTMLリファレンス > <details>

概要

形式
<details>~</details>
サポート
LS / H5.1 / Ch12 / Fx49 / Op15 / Sa6
カテゴリ
フローコンテンツ
セクショニングルート
インタラクティブコンテンツ
パルパブルコンテンツ
親要素
フローコンテンツ を子要素に持てるもの
子要素
1つの summary 要素とそれに続く フローコンテンツ
タグの省略
開始タグ:必須、終了タグ:必須
属性
グローバル属性
name
open

説明

details は、普段は非表示にされているが、ユーザが詳細表示したいときだけ表示される要素を記述します。通常は、サマリのみが表示され、ブラウザがサポートする何らかの詳細表示ボタンを押した際に詳細情報が表示されます。

HTML5 のワーキングドラフトで採用が検討されていましたが、HTML5 最終案では見送られ、HTML5.1 で採用されました。HTML Living Standard でもサポートされています。Internet Explorer ではサポートされていません。

属性

グローバル属性
詳細は グローバル属性 を参照してください。
name
LS
details 要素グループの名前を指定します。同じ名前を持つ details 要素は、どれかひとつが開くと他の要素は閉じます。Chrome 120 でサポートされましたが、Firefox 131 ではまだサポートされていないようです。(→ サポート状況)
open
LS/H5.1
この属性を指定すると、ページを開いた際に、詳細情報がデフォルトで表示されるようになります。

使用例

HTML
<details name="options" open>
  <summary>検索オプション</summary>
  <div><label><input type="checkbox" name="only-japanese">日本語サイトのみ</label></div>
  <div><label><input type="checkbox" name="no-safe-search">セーフサーチ無効</label></div>
</details>
<details name="options">
  <summary>表示オプション</summary>
  <div><label><input type="checkbox" name="no-images">イメージ無し</label></div>
  <div><label><input type="checkbox" name="compact">コンパクト表示</label></div>
</details>
表示
検索オプション
表示オプション

関連項目

<summary>

リンク


Copyright (C) 2011-2024 杜甫々
初版:2011年6月4日 最終更新:2024年7月14日
http://www.tohoho-web.com/html/details.htm