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

CSSで画像の横に文字を回り込ませる方法と解除する方法
このエントリーをはてなブックマークに追加
PR

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

 

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

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

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;を追加して解除する事もできます

 

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)