XHTML/CSS・トップ | CSSプロパティ・目次

●ボックスの左右にテキストを回り込ませる

float: left

 floatは適用した要素の左右にテキストまたは要素を流し込ませる(回り込ませる)プロパティです。指定できる値は leftおよび rightですが、none(回り込みなし)も指定できます。すべての要素に適用できますが、positionプロパティで配置された要素など、例外があります。また、img(画像)要素などのように幅を持っている置換要素以外に適用する場合は widthプロパティで幅をあらかじめ指定する必要があります。floatプロパティで指定した値は継承しません。ここでは div要素に適用した場合の解説をします。

【CSS】↓

#hidari {
 float: left;
 background-color: #aed4f1;
 color: #000000;
 width: 130px;
 height: 600px;
 margin-left: 1em;
 margin-right: 1em;
 margin-bottom: 1em;
}

※直接関係のある書式は #hidari { float: left; } です。ここではIDセレクタを使っていますが、クラスセレクタや直接、要素名に適用させることも可能です。

【HTML】↓

<div id="hidari">float: left</div>

【解説】↓

 floatプロパティの値として leftを指定し、適用した要素(ここでは div要素)のボックスを左寄せにしています。結果として、テキストが右に回り込みました。


【CSS】↓

#migi {
 float: right;
 background-color: #ffcccc;
 color: #000000;
 width: 130px;
 height: 400px;
 margin-left: 1em;
 margin-right: 10%;
 margin-bottom: 1em;
}

※直接関係のある書式は #migi { float: right; } です。

【HTML】↓

<div id="migi">float: right</div>

float: right

【解説】↓

 floatプロパティの値として rightを指定して適用した要素(ここでは div要素)のボックスを右寄せにしています。結果として、テキストが左に流し込まれています。

【総解説】↓

 順序としてはfloatプロパティを適用した要素の次の要素が回り込みます。また、回り込みを指定した後にその指定を解除するには clearプロパティを利用します。(clearプロパティについては別項を参照にしてください。)

 適用した要素にある程度、すき間があったほうが見やすい場合、または都合が良い場合はマージン(margin)を指定すると良いでしょう。

【バグについて】↓

 ブラウザの種類、バージョンによっては必ずしもCSS 2の仕様通りに表示されるとは限らないのでこのプロパティを適用した場合、厳密には多くのブラウザで確認する必要があります。(ウィンドウの幅を広めたり、狭くしてみたりするとバグが見つかる場合があります。特に、CSSで floatプロパティを使った段組みを作った場合、この方法で確認することを推奨します。)

■関連ページ

XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2005-2007 http://www.xml.vc/