HTML: figure タグ
概略
img タグの画像にタイトルや説明文を付ける場合は img をブロック要素で囲います。 従来は div タグや p タグなどを使っていましたが、 現在では figure タグ、figcaption タグ があります。
基本的なサンプル
先に前置き話で div タグ(ブロック要素) の中に img タグを置くサンプルです。 figure タグがなかった時代の話です。div タグも figure タグも使い方は同じです。
div タグの中に img タグを置く。
img タグを div タグや p タグなどの汎用のタグで括るのに比べて、
figure タグや figcaption タグで括った方が
画像と画像に関連した説明のブロックであることが分かりやすくなります。
セマンティック HTML
figure タグの中に img タグを置く。 figure と figcaption のサンプル。
画像と半透明のテキストを重ねたサンプル。 CSS の position: absolute; を使用します。
CSS position: absolute;
CSS 効果 (2): 要素を半透明にする
画像とテキストを左右に並べる
CSS flex で画像と説明文を左右に並べるサンプル。 画像は figure, img で固定幅、説明文は dl, dt, dd で可変幅。
CSS: flex
テキストと画像を左右に並べて表示するサンプル。 テキストを画像の周りに流し込ませる例。 CSS float を使用します。 p タグの中に figure タグを置けない点に注意。
CSS: float
サンプルいろいろ
CSS resize で img 要素の大きさをドラッグ操作で変更できるようにしたサンプル。
CSS: resize: 要素の大きさを手動操作で変更する
関連
番外
- old_html_img_centering01.html
HTML 考古学、さまざまな img センタリング。