HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


画像や文章の回り込みを指定する

CSSの書き方

float:値 ;

CSSの詳細情報
プロパティ名 float 読み方 フロート
初期値 none 意味 画像や文章の回り込み設定
none(回り込みしない)/left/right
対象 位置を定める要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「float」プロパティは、文章や画像を回り込みさせる機能をもつスタイルシートです。例えば、「float:left;」とすると、この「float」プロパティを指定した内容や要素は左寄せされ、後に続く内容が、その右側に回り込みます。逆に、「float:right;」とすれば、回り込みは右側に設定されます。

回り込みの解除

この回り込みは「clear」プロパティによってその回り込みが解除されるまで、もしくは後に続くブロックレベル要素の「width」プロパティの値が指定されており、なおかつその要素が内容に収まりきらないときに回り込みが解除されます。

連続指定

「float」プロパティは、連続して使用することができます。従って、「float」プロパティを指定した連続するブロック要素は、連続して回り込みます。例えば、「float:left;」を連続すると、最初の要素の右側に次の内容が回り込みます。

ブロックレベル要素の扱い

「float」プロパティをブロックレベル要素に指定する場合は、必ずそのブロックレベル要素の「width」プロパティの値を定めなければなりません。

また、2つ以上のブロックレベル要素を「float」プロパティによって並べて表示する場合、すべてのブロックレベル要素において「float」プロパティを指定しなければなりません。そうしないと、主にGecko系エンジン(FireFoxやNetscape)で正しく表示されません。

CSS/HTMLサンプル

p { height:400px; width:250px;}
p.sm1 { float:left; background-color:#ffdff9; }
p.sm2 { float:left; background-color:#eeeeee; margin-left:10px;}

2つの段落要素をfloatプロパティによって並べる サンプル