Sep. 27th, 2020
＃
“open”属性について
“open”属性は“details”要素が表す開閉式のウィジェットを既定で開いた状態にする属性です。
ウィジェットが閉じられる時にブラウザによって“open”属性が取り除かれ、開かれる時には“open”属性が付加されます。
＃
＃
サンプルコード
属性値を省略する
<figure>
<img src="sample_photo.jpg" style="width: 60%;">
<figcaption>
<details open>
<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
属性値を省略しない
<figure>
<img src="sample_photo.jpg" style="width: 60%;">
<figcaption>
<details open="open">
<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>
