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

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

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

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

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

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

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

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

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

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

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

[caption id=”attachment_1701” align=”aligncenter” width=”539”] HTML5で画像にキャプションをつける[/caption]

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

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

figure {
  padding-top: 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #f3f3f3;
  text-align: center;
}

figcaption {
  font-size: 80%;
  margin: 1em 0;
}

さいごに

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

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