gorogoronyan FC2

2014/12-2024/04/26

HTML: テキストと画像を並べる

概略

画像に説明文がある場合は img タグを figure タグの中に入れます。
説明文は figcaption タグに入れます。
figure タグ
p タグ内に figure タグなどを入れないこと。
p タグの中に img タグを入れることはできますが、 figure タグを入れることはできません。 figure タグを入れると p タグの外側にあるとみなされます。 CSS の設定が反映されないといったことが起こるので注意してください。
p タグ

img とテキストを並べる

TestHTML_img_align01.html
img タグの画像をセンタリング、右寄せするサンプル。

img に囲みのタイトルや説明文を付ける - figure タグ

img 画像にタイトルや説明文を付ける場合は img タグをブロック要素で囲います。従来は p タグや div タグを使っていましたが、現在では figure タグがあります。
figure タグ

TestHTML_img_figure01.html
figure 要素の中に img を置く。figure と figcaption のサンプル。

TestHTML_img_width_min_max1.html
HTML ソース
画像の大きさをウインド幅に合わせて可変させるサンプル。画像の幅の最大値 (max-width) を設定します。
HTML: ページレイアウト (3) 可変幅

flex で画像とテキストを左右に並べる (2023/07)

TestHTML_layout_index01.html (2023/07)
CSS flex で画像と説明文を左右に並べるサンプル。画像は figure, img で固定幅、説明文は dl, dt, dd で可変幅。
CSS: flex
figure タグ
dl, dt, dd タグ

float で img とテキストを左右に並べる

img に float: left; や float: right; を指定してテキストと画像を左右に並べます。 float を指定すると img はブロック要素になる点に注意。 div や figure を float で並べる話と同じ扱い方になります。
CSS float サンプル

TestHTML_img_text_float01.html
画像とテキストを左右に並べる。
float 解除のサンプル。float を解除しないとレイアウトが崩れることも。

TestHTML_img_text_float03.html
テキストを回り込ませる場合、回り込ませたくない場合。

TestHTML_img_text_float02.html
文章中に画像を置く。 img タグだけを入れて float: left; float: right; で画像を左寄せや右寄せにするサンプル。 figure や二重の div などを使わない簡素な例。

TestHTML_figure_text_float01.html
img の代わりに figure を配置したサンプル。 figure の float も img の float と使い方は同じです。ただし、p の中に figure を置けない点に注意。
figure タグ

関連

番外

old_html_img_centering01.html
HTML 考古学、さまざまな img センタリング。