画像の回り込み

画像の回り込みについて確認。

ducky150

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。


[html]
<section>
<img src="***.jpg">
<p>テキストが入ります。</p>
</section>
[/html]
通常、上記のようなHTMLを組んだ場合、画像の下にテキストが配置されますが、画像の右側にテキストを回り込ませたい場合にどうすれば良いのでしょうか。

昔のテーブルレイアウト

その昔、レイアウトはテーブルを組んで、その中に画像やら文字を配置しておりました。

ducky150 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

[html]
<table>
<tbody>
<tr>
<td><img src="***.jpg" alt="***" width="***" height="***" /></td>
<td>テキストが入ります。</td>
</tr>
</tbody>
</table>
[/html]

回り込みさせてみる

現在は、CSSでレイアウトを行います。冒頭のHTMLでレイアウトしてみます。画像を左寄せし、テキストを右側に回り込ませます。

ducky150

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

[css]
img {
float: left;
}
[/css]
画像に対して float: left を指定し、画像を左に配置します。すると、テキストは右側に回り込みます。

回り込ませた場合、その後のレイアウトに影響を与えてしまいますので、親ブロックに回り込み解除を行っておきます。解除はclearfixを使う方法もありますが、自分は以下の方法です。
[css]
section {
clear: both;
overflow: hidden;
}
[/css]

画像とテキストの間が詰まっているので開けてみる

ducky150

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

[css]
img {
float: left;
margin-right: 10px; /*画像の左側にマージン*/
}
[/css]
画像の右側に margin-right: 10px を指定し、画像とテキストの間に10px分の間隔を開けました。テキストの量が多いと画像エリアの下にテキストが流れます。

ducky150

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

画像の下にテキストを回り込ませない

ducky150

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

[css]
p {
margin-left: ***px; /*テキストブロックの左側にマージン*/
}
[/css]
簡単にはこんな感じでしょうか?
レスポンシブの場合は、%を使うとか調整が必要ですが、とりあえず。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください