HTML要素 ・ リンク・画像
<figcaption>
図表のキャプション
figure でまとめた図や写真に付ける説明文（キャプション）です。figure の最初か最後の子要素として書きます。
01
サンプルコード
HTML
1<figure>
2 <figcaption>表1：営業時間</figcaption>
3 <table>
4 <tr><th>平日</th><td>8:00〜20:00</td></tr>
5 <tr><th>土日</th><td>9:00〜18:00</td></tr>
6 </table>
7</figure>
CSS
1figure {
2 margin: 0;
3}
4figcaption {
5 font-weight: bold;
6 margin-bottom: 6px;
7}
8th, td {
9 padding: 4px 12px;
10 border: 1px solid #ccc;
11}
02
実行結果
ブラウザでの表示
03
解説
figcaption は、親の figure の内容を説明するキャプションです。figure の中に1つだけ書けます。
表や図の上に置くときは figure の最初に、写真の下に置くときは最後に書きます。
img の alt は画像が見えない人のための代替テキスト、figcaption はすべての人に見せる説明文です。役割が異なるので、同じ文章を書く必要はありません。
04
応用例・注意点
よく指定するCSS
| プロパティ | 説明 |
|---|---|
font-size | 本文より小さめにする |
color | 本文より薄い色にする |
text-align | 中央揃えなど |
margin-top | 画像との間隔 |
キャプションを中央揃えにする
写真の下に小さく中央揃えで表示する定番の指定です。
CSS
1figcaption {
2 text-align: center;
3 font-size: 12px;
4 color: #777;
5}
注意点
- 01figure の外で figcaption は使えません。
- 021つの figure に figcaption を2つ以上書くことはできません。