figcaptionで画像にタイトルをつける！ - HTML5とCSS3をマスターするためのブログ

今回はHTMLしか触りませんでした。以前指定したタグが生きているので、HTMLだけで問題ありませんでした。

今回の記述は以下のとおりです。

<figure class="photo-center">
　<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
　<figcaption>夏のひまわり畑</figcaption>
</figure>

figureクラス内にfigcaptionで囲ったタイトルをつけることによって、画像の下にテキストを表示させることができます。

今回は以前記述した、text-align: centerが生きているため、テキストが画像の中心に来るように指定されています。

figcaptionで囲う位置によって、表示のされかたが異なります。

　<figcaption>夏のひまわり畑</figcaption>
　<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
</figure>

上記のようにすると、画像の上にテキストが来るようになります。

今回のBefore Afterです。

Before

After

画像の中心にテキストが表示されているのがわかると思います。

HTMLはCSSと異なり、記述した位置によって表示が異なるので、より直感的に操作できるなって感じました。figcaptionはfigureクラス内でしか使う場面がありませんが、今回のように画像付近にテキストを挿入する機会は多いと思うので、しっかり覚えておきたい記述です。

それでは引き続き勉強していこうと思います。