HTMLで画像下部にキャプションを付ける方法/figureタグ・figcaptionタグの使い方

写真をページ上に表示した場合など、画像の下にちょっとした説明やデータを付記したい場合も多いと思います。
そうした場合のために用意されたfigcaptionは、画像にキャプションを付ける専用のタグとなります。

figcaptionタグの使い方

実際に上のタグを記入すると、

なります。特にCSS指定してないので普通に文章がくっついてるだけです。
もう少しそれっぽくしたければ、少しCSSをいじる必要があります。

//CSS
figure{text-align:center;}
figcaption{color:grey;font:10px arial;}

仮にこのようなCSSを適用したとすると、同じhtmlを入力しても、

ちょっと見栄えが変わります。