CSSで画像の横に文字を回り込ませる方法と解除する方法

結構基本的なテクニックなのですが
初心者にはレイアウトの崩れに陥りやすいポイントです

画像の横に文字を回り込ませる方法

まずは文字を回り込ませる方法ですが

imgにfloatを使うことで文字を回り込ませることが出来ます

例

CSSで画像の横に文字を回り込ませる方法と解除する方法 (1)

CSSで画像の横に文字を回り込ませる方法と解除する方法 (2)

CSSで画像の横に文字を回り込ませる方法と解除する方法 (3)

画像にCSSでfloatを書けてやると、その後に来る文字を画像に回り込ませることが出来ます

HTML コード

<img src="img/000.jpg" class="left">

CSS コード

.left {float: left;margin-right:10px;}

といった具合になります、leftとrightで右側左側をそれぞれ入れ替えて使えばOKです

これで文字の回り込みをさせることが出来るのですが
問題点があります、それは文字の量が画像を覆い尽くす量が無かった場合にレイアウト崩れを起こしてしまうことです

CSSで画像の横に文字を回り込ませる方法と解除する方法 (4)

次のコンテンツが、飲み込まれてしまっています

解除の仕方はCSSでclear:both;を次に来る要素のCSSにつけてやるだけなのですが
決まったレイアウとの場合は、直接クラス付をつければOKですが、そうではない場合は<br>タグにクラスを付けて解除すると解決します

イメージ

CSSで画像の横に文字を回り込ませる方法と解除する方法 (5)

HTML コード

<h1>title</h1>
<img>
<p>文章</p>
<br class="clear">

<h1>title</h1>
<img>
<p>文章</p>
<br class="clear">

CSS コード

.clear {
    clear: both;
}

imgのクラス等は省略しています

これでレイアウトの崩れを防ぐことが出来ます
毎回文章の下にくるHTMLタグが決まっていて、clear:both;でfloatを解除しても問題ない場合にはそちらのタグにクラスを付けるか、元々有るクラスにclear:both;を追加して解除する事もできます

画像に文字を回り込ませるときにはぜひセットで覚えておきたいポイントです

短縮URL:

2014年01月09日 WEB制作系 CSS