HTML講座

画像・表の配置

画像を文字として配置

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

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

画像などを独立したブロックとして配置

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

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

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

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

float:left: 対象ブロックを左に置く。
float:right: 対象ブロックを右に置く。

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

段組風(display:table-cell)

画像<img>などの入ったブロックと説明部分ブロックを表組み的に横に並べる。

display:table-row: <tr></tr>相当の表示にする
display:table-cell: <td></td>相当の表示にする

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

段組風(flexbox)

画像<img>などと説明部分ブロックをflex(FlexBox)コンテナに入れる。

display:flex: 中の要素をflexアイテムにする。
flex-wrap:wrap: 横に溢れたときに折り返す(画面が小さくなったときは縦に並ぶ)。

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

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

説明部分ブロックを任意の位置に配置(位置指定)。

position:relative

top:大きさ・bottom:大きさ・left:大きさ・right:大きさ…本来ある場所からの相対的な位置のズレを示す。
その中にある要素のposition:absoluteに対する基準ボックスとなる。

position:absolute

top:大きさ・bottom:大きさ・left:大きさ・right:大きさ…基準ボックス内の位置を示す。

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