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 タグ
figure 要素の中に img を置く。figure と figcaption のサンプル。
TestHTML_img_width_min_max1.html
HTML ソース
画像の大きさをウインド幅に合わせて可変させるサンプル。 画像の幅の最大値 (max-width) を設定します。
HTML: ページレイアウト (3) 可変幅
flex で画像とテキストを左右に並べる (2023/07)
TestHTML_layout_index01.htmlCSS 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 サンプル
画像とテキストを左右に並べる。
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 タグだけを入れて float: left; float: right; で画像を左寄せや右寄せにするサンプル。 figure や二重の div などを使わない簡素な例。
img の代わりに figure を配置したサンプル。 figure の float も img の float と使い方は同じです。 ただし、p の中に figure を置けない点に注意。
figure タグ
関連
- HTML: img タグ (1)
- HTML: img タグ (2) 画像を並べる
- HTML: figure タグ
- HTML: 文章レイアウトとフォントのサンプル
- HTML: ページレイアウト
- CSS: 要素の配置: ブロック要素
- HTML: 要素の配置,左右中央,上下中央
番外
- old_html_img_centering01.html
HTML 考古学、さまざまな img センタリング。