HTML講座

画像と文の配置

画像を文字として配置

説明文と同じボックス中にインラインで画像<img>を挿入する。

<div style="width:全体の幅;"><img src="画像のURI">画像に対する説明文。</div>

画像を独立したボックスとして配置

画像<img>を独立したボックスの中に入れ、その後に説明部分ボックスを配置する。

<figure style="width:全体の幅;">
<img src="画像のURI">
</figure>
<div style="width:全体の幅;">画像に対する説明文。</div>

画像の周りに文字を回り込ませる

画像<img>の入ったボックスをfloat。説明部分ボックスは通常フローで配置。ボックスは重なるが、文字は画像をよけて流し込まれる。

<figure style="float:left;">
<img src="画像のURI">
</figure>
<div style="width:全体の幅;">画像に対する説明文。</div>
<div>div style="clear">
</div>

段組風(display:table-cell)

全体をdisplay:table、画像<img>の入ったボックスと説明部分ボックスをdisplay:table-cell。

<div style="display:table">
<figure style="display:table-cell;">
<img src="画像のURI">
</figure>
<div style="display:table-cell;width:calc(全体の幅 - (画像の幅+α));vertical-align:top;>画像に対する説明文。</div>
</div>

段組風(float)

画像<img>の入ったボックスと説明部分ボックスをともにfloat。

<figure style="float:left;">
<img src="画像のURI">
</figure>
<div style="float:left;width:calc(全体の幅 - (画像の幅+α));>画像に対する説明文。</div>

段組風(position)

説明部分ボックスを任意の位置に配置。

<div style="position:relative;height:説明部分のボックスの高さ";>
<figure>
<img src="画像のURI">
</figure>
<div style="position:absolute;top:0;left:画像の幅;width:calc(全体の幅 - (画像の幅+α));">画像に対する説明文。</div>
</div>

段組風(flexbox)

画像と説明部分ボックスをflexboxコンテナに入れる。

<div style="display:flex;flex-wrap:wrap;">
<figure>
<img src="画像のURI">
</figure>
<div style="width:calc(全体の幅 - (画像の幅+α));">画像に対する説明文。</div>
</div>

画像と文字の重ね合わせ(position)

説明部分ボックスを任意の位置に配置。

<div style="position:relative;">
<figure>
<img src="画像のURI">
</figure>
<div style="position:absolute;top:上からの開始位置;left:左からの開始位置;">好きな文字</div>
</div>