HTML - details / summary 要素

概要

名前
details / summary
カテゴリー
details
  • Flow content
  • Sectioning content
  • Interactive content
  • Palpable content
summary
なし。
配置できる場所
details
Flow content が期待される場所。
summary
details 要素の最初の子要素として配置すること。
コンテンツモデル
details
1 個の summary 要素と、それに続く Flow content。
summary
Phrasing content。または Heading content のうち、1 つの要素。
説明
details
details 要素は、ディスクロージャー・ウィジェット (詳細情報の表示・非表示を切り替えられる部品) になる要素です。要素内容の先頭に summary 要素を配置して、どんな詳細情報が見られるのかを示す見出しやキャプションを表示させることができます。summary 要素の内容は常に表示され、残りの内容が表示・非表示の対象となります。summary 要素がない場合は、ブラウザが「詳細:」のような文字列を表示します。
summary
summary 要素は、親要素である details 要素の (常に表示される) 見出しやキャプションとなる要素です。
タグの省略
details
開始タグも終了タグも省略できません。
summary
開始タグも終了タグも省略できません。
DOM Interface
details
HTMLDetailsElement
summary
HTMLElement
仕様書
要素仕様書策定状況コメント
detailsLS:現行の標準
REC:勧告
summaryLS:現行の標準
REC:勧告
サポートブラウザ
要素 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
details××49126156.1
summary××4912615×4
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

details 要素の属性

details 要素の属性サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
open××49126156.1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
open
この論理属性は、ページ読み込み時に詳細内容、つまり details 要素の内容が表示されるよう指定するものです。既定値は false であり、詳細内容は表示しません。

summary 要素の属性

グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。

サンプルコード

details / summary 要素のサンプルコードは以下のとおりです。

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
details / summary 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
6
Shares:
0
Tag:
HTML
hatebu icon
hatebu