画像の回り込み
画像の回り込みについて確認。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
[html]
<section>
<img src="***.jpg">
<p>テキストが入ります。</p>
</section>
[/html]
通常、上記のようなHTMLを組んだ場合、画像の下にテキストが配置されますが、画像の右側にテキストを回り込ませたい場合にどうすれば良いのでしょうか。
昔のテーブルレイアウト
その昔、レイアウトはテーブルを組んで、その中に画像やら文字を配置しておりました。
|
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 |
[html]
<table>
<tbody>
<tr>
<td><img src="***.jpg" alt="***" width="***" height="***" /></td>
<td>テキストが入ります。</td>
</tr>
</tbody>
</table>
[/html]
回り込みさせてみる
現在は、CSSでレイアウトを行います。冒頭のHTMLでレイアウトしてみます。画像を左寄せし、テキストを右側に回り込ませます。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
[css]
img {
float: left;
}
[/css]
画像に対して float: left を指定し、画像を左に配置します。すると、テキストは右側に回り込みます。
回り込ませた場合、その後のレイアウトに影響を与えてしまいますので、親ブロックに回り込み解除を行っておきます。解除はclearfixを使う方法もありますが、自分は以下の方法です。
[css]
section {
clear: both;
overflow: hidden;
}
[/css]
画像とテキストの間が詰まっているので開けてみる
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
[css]
img {
float: left;
margin-right: 10px; /*画像の左側にマージン*/
}
[/css]
画像の右側に margin-right: 10px を指定し、画像とテキストの間に10px分の間隔を開けました。テキストの量が多いと画像エリアの下にテキストが流れます。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
画像の下にテキストを回り込ませない
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
[css]
p {
margin-left: ***px; /*テキストブロックの左側にマージン*/
}
[/css]
簡単にはこんな感じでしょうか？
レスポンシブの場合は、％を使うとか調整が必要ですが、とりあえず。