HTML要素 ・ リンク・画像
<figure>
図表のまとまり
画像・図・コードなどと、そのキャプションをひとまとまりにする要素です。本文から参照される「図1」のようなものに使います。
01
サンプルコード
HTML
1<figure>
2 <img src="photo.jpg" alt="ラテアートの入ったカフェラテ" width="320" height="200">
3 <figcaption>図1：季節限定のカフェラテ</figcaption>
4</figure>
CSS
1figure {
2 margin: 0;
3}
4figcaption {
5 margin-top: 6px;
6 font-size: 13px;
7 color: #666;
8}
02
実行結果
ブラウザでの表示
03
解説
figure は、本文の流れから切り離しても意味が通じる図や写真を、キャプションと一緒にまとめる要素です。
キャプションは figcaption で書き、figure の最初か最後に置きます。
ブラウザは figure に既定で左右40pxほどの margin を付けます。不要な場合は margin: 0 を指定します。
04
応用例・注意点
figure に入れられるもの
| 内容 | 説明 |
|---|---|
img / picture | 写真・イラスト |
svg | 図・グラフ |
pre + code | コード例 |
blockquote | 引用 |
table | 表 |
コード例にキャプションを付ける
画像以外にも使えます。
HTML
1<figure>
2 <pre><code>display: flex;</code></pre>
3 <figcaption>リスト1：横並びにするCSS</figcaption>
4</figure>
注意点
- 01装飾目的の画像だけを figure で囲む必要はありません。
- 02figcaption は figure の中に1つだけ書きます。