このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

details要素:開閉式のウィジェットHTML5.1で追加

記事Sep. 27th, 2020
開閉式のウィジェットを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

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>
海の近くに建つ風車
ファイル名:
sample_photo.jpg
撮影日:
2018年8月13日
撮影場所:
福岡県宗像市
ファイルサイズ:
27.9KB
大きさ:
750×497 pixels

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

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
open="" ウィジェットを既定で開いた状態にする open ウィジェットを既定で開いた状態にする

仕様書

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

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<details>
定義なし

定義なし

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク