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

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

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

要素について

カテゴリー なし
利用場所 details”要素の最初の子要素として
内容 フレージング・コンテンツと任意で混在するヘッディング・コンテンツ
タグの省略 不可

summary”要素は親要素となるdetails”要素のコンテンツの要約や表題、説明を表します。

details”要素で表される開閉式のウィジェットが閉じられている時は“summary”要素の内容だけが表示されます。また、“summary”要素をクリックすることでウィジェットが開閉されます。

サンプルコード

<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”要素はHTML5.1から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

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

定義なし

定義あり

定義あり

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