HTML <details>

<details>は概要に対する詳細を記述するHTMLタグです。details要素の使い方をサンプルを交えてご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。details 要素の終了タグは省略できない。

<details>
  <!-- one summary element followed by flow content -->
</details>
<DETAILS>
  <!-- one summary element followed by flow content -->
</DETAILS>

コンテンツモデル

details 要素の開始タグと終了タグの間には、ひとつの summary 要素と、それに続くフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。

属性

次に示す属性をdetails要素に指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
データリストの識別子
open
初期状態で詳細を表示するかどうかを指定する。
open 属性
説明
true 初期状態で詳細を表示する
false 初期状態で詳細を表示しない(デフォルト値)

属性名だけ指定して、属性値を指定しない場合は、true を指定したことになる。

概要(summary)の部分をクリックすると、詳細(details)を表示したり、隠したりできる。

<details open>
  <summary>HTML</summary>
  <ol>
    <li>要素</li>
    <li>属性</li>
  </ol>
</details>
HTML
  1. 要素
  2. 属性
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

JavaScriptからは HTMLDetailsElement インタフェースを通じて details 要素へアクセスできる。

HTMLDetailsElement インタフェースのプロパティ
プロパティ 説明
accessKey string accessKey属性
isContentEditable boolean この要素が編集できるかどうか(読取り専用)
dataset DOMStringMap カスタムデータ属性
dir string dir属性
draggable boolean draggable属性
innerText string ノードに描画されるテキスト
lang string lang属性
open boolean open属性
style string style属性
tabIndex number tabIndex属性
title string title属性

参考文献

Web Hypertext Application Technology Working Group (2022) Interactive elements HTML Living Standard

HTML <summary>

<summary>は詳細に対する概要を記述するHTMLタグです。summary 要素の使い方をサンプルを交えてご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。details 要素の終了タグは省略できない。

<summary>
  <!-- phrasing content -->
</summary>
<SUMMARY>
  <!-- phrasing content -->
</SUMMARY>

コンテンツモデル

summary 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

属性

以下に示す属性を summary 要素に指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
要素を一意に識別できる識別子を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

JavaScriptからは HTMLDetailsElement インタフェースを通じて summary 要素へアクセスできる。

HTMLDetailsElement インタフェースのプロパティ
プロパティ 説明
accessKey string accessKey属性
isContentEditable boolean この要素が編集できるかどうか(読取り専用)
dataset DOMStringMap カスタムデータ属性
dir string dir属性
draggable boolean draggable属性
innerText string ノードに描画されるテキスト
lang string lang属性
open boolean open属性
style string style属性
tabIndex number tabIndex属性
title string title属性

参考文献

Web Hypertext Application Technology Working Group (2022) Interactive elements HTML Living Standard