HTML5で画像にキャプションをつける

typecases

HTMLで画像にキャプションをつけるとき、皆さんはどのタグを使用していますか?

おそらく、全体をdivで囲って、その中の画像をさらにdiv(もしくはp)、キャプション部分をpでマークアップすると思います。

これまでのHTMLならそれでもいいのですが、少し調べるとHTML5ではもっと適切な方法があったので今回はその方法をシェアしてみます。

スポンサーリンク

画像にキャプションをつける方法のおさらい

まずは、これまでのHTMLでは画像にキャプションをつける際にどのようにマークアップしていたかのおさらいをしておきます。

おそらく、こんなかんじでマークアップするのが一般的だと思います。

HTMLで画像にキャプションをつける

真ん中の青い部分にimgが入ります。場合によっては、青い方のdivはいらないかもしれませんが。

画像にキャプションをつける方法 – HTML5の場合

で、HTML5の場合は、新しく追加された「figure」と「figcaption」というタグを使うのが正しい方法です。

HTML5で画像にキャプションをつける

これによって、より具体的に「ここはキャプションだよ!」と表現できるようになりましたね。

HTML5で画像にキャプションをつける

HTML5で画像にキャプションをつける

まぁ、あとは適当にスタイルしてください。これはWordPressテーマ「Simplicity」のキャプションのスタイルです。

全体を囲むfigureの背景に薄い色をつけたり、角を丸くしたりするといい感じになりますね。キャプションの文字はやや小さめにするのが一般的かと思います。

さいごに

実は、WordPressで画像にキャプションを付ける際のマークアップはfigureやfigcaptionを使っていません。上記のキャプションをつけた画像の例も、ソースを見ていただければわかると思いますが、divやpタグを用いています。

WordPressの設定ファイルをいじればfigureとfigcaptionに直せると思うのですが、よくわからないので直していません・・・。

スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*