Sep. 27th, 2020
＃
要素について
| カテゴリー | なし |
| 利用場所 | “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でも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <summary> |   |
|
  |
|
|
DOMインターフェース
“summary”要素は“HTMLElement”インターフェイスを使用します。
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
details > summary:first-of-type {
unicode-bidi: isolate;
display: list-item;
counter-increment: list-item 0;
list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
list-style-type: disclosure-open;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
summary {
unicode-bidi: bidi-override;
}
