HackWeb系ハック。HTML・CSSHTMLで画像にキャプションをつけるとき、皆さんはどのタグを使用していますか?おそらく、全体をdivで囲って、その中の画像をさらにdiv(もしくはp)、キャプション部分をpでマークアップすると思います。これまでのHTMLならそれでもいいのですが、少し調べるとHTML5ではもっと適切な方法があったので今回はその方法をシェアしてみます。スポンサーリンク画像にキャプションをつける方法のおさらいまずは、これまでのHTMLでは画像にキャプションをつける際にどのようにマークアップしていたかのおさらいをしておきます。こんなかんじでマークアップするのが一般的だと思います。真ん中の青い部分にimgが入ります。場合によっては、青い方のdivはいらないかもしれませんが。HTML5の場合で、HTML5の場合は、新しく追加された「figure」と「figcaption」というタグを使うのが正しい方法です。これによって、より具体的に「ここはキャプションだよ!」と表現できるようになりましたね。HTML5で画像にキャプションをつけるまぁ、あとは適当にスタイルしてください。これはWordPressテーマ「Simplicity」のキャプションのスタイルです。全体を囲むfigureの背景に薄い色をつけたり、角を丸くしたりするといい感じになりますね。キャプションの文字はやや小さめにするのが一般的かと思います。0;}さいごに実は、WordPressで画像にキャプションを付ける際のマークアップはfigureやfigcaptionを使っていません。上記のキャプションをつけた画像の例も、ソースを見ていただければわかると思いますが、divやpタグを用いています。WordPressの設定ファイルをいじればfigureとfigcaptionに直せると思うのですが、よくわからないので直していません・・・。Hackの最新ニュース情報を、いいねしてチェックしよう!ways_wh関連記事HTMLで文字を中央寄せするときの注意点HTMLで文字を中央寄せする方法と聞くと、「いまさら文字の中央寄せかよ!」と思う方も多いかもしれません。記事を読むCSS3のborder-radiusで正円を作るときの数値指定とベンダープレフィックスについてCSS3の中でも、border-radiusは特によく使うプロパティです。記事を読むHTML程度ならネットの知識で十分?私は無理でした。プログラミングの経験者が、HTMLを軽く復習したいときにはネットから得られる知識で十分かもしれません。記事を読むtime要素の正しい使い方time要素は検索エンジンに記事を投稿した時間を知らせるための大切なタグです。記事を読むHTML5のロゴ入りTシャツがいい感じ。HTML5はロゴがいい感じですよね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。申します!Web系のことに興味があります!Web系のシステム開発ならフロントエンドからサーバーサイドまで一通りこなせます。