“details”要素:開閉式のウィジェット

要素について

“details”要素は開閉式のウィジェットを表します。

HTML5.1で新しく追加された要素で、これまではこのようなウィジェットを作るにはスクリプトが必要でしたが、“details”要素を使用することで簡単な開閉式のウィジェットをHTMLだけで作ることができます。

“details”要素の内容はウィジェットが開かれた時だけ表示され、追加の情報などを含むことができます。

ウィジェットはクリックされると開閉します。ウィジェットが開かれる時にはブラウザによって“open”属性が付加され、閉じられる時には“open”属性が取り除かれます。

最初の子要素となる“summary”要素はウィジェットが閉じられたときに表示される要約を表します。“summary”要素が不在の場合は“詳細”などのブラウザのデフォルトの文字列が表示されます。

脚注を記載するのに“details”要素を使用するのは適切ではありません。

HTML5.1で新しく追加された要素のため一部のブラウザでは対応していない場合があります。対応していないブラウザでは“details”要素の内容がそのまま表示されます。

サンプルコード

<figure>

<img src="sample_photo.jpg" style="width: 60%;">
<figcaption>

<details>

<summary>海の近くに建つ風車</summary>
<dl>

<dt>ファイル名:</dt>
<dd>sample_photo.jpg</dd>
<dt>撮影日:</dt>
<dd>2018年8月13日</dd>
<dt>撮影場所:</dt>
<dd>福岡県宗像市</dd>
<dt>ファイルサイズ:</dt>
<dd>27.9KB</dd>
<dt>大きさ:</dt>
<dd>750×497 pixels</dd>

</dl>

</details>

</figcaption>

</figure>

“summary”要素がない場合はブラウザのデフォルトの文字列がウィジェットが閉じられた時に表示されます。

<figure>

<img src="sample_photo.jpg" style="width: 60%;">
<figcaption>

<details>

<dl>

<dt>ファイル名:</dt>
<dd>sample_photo.jpg</dd>
<dt>撮影日:</dt>
<dd>2018年8月13日</dd>
<dt>撮影場所:</dt>
<dd>福岡県宗像市</dd>
<dt>ファイルサイズ:</dt>
<dd>27.9KB</dd>
<dt>大きさ:</dt>
<dd>750×497 pixels</dd>

</dl>

</details>

</figcaption>

</figure>

属性と値

仕様書

“details”要素はHTML5.1から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書

<details>

open=""