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

window IT

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

Advertisements

figcaptionタグの使い方

figureタグ:画像とキャプションをグループ化する
figcaptionタグ:画像にキャプションを指定する
<figure><img src=”場所/ファイル名”><figcaption>説明</figcaption></figure>

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

sg
こういう感じに

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

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

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

sg
こういう感じに

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

コメント