資料の一覧へ  

ページレイアウトをデザインする

float指定の基本

floatは浮動化といい、指定したブロックを左または右に寄せ、余白部分にfloatを指定したブロックの下にあるブロックを回り込ませるためのものです。

floatを利用する場合、基本的な注意点は以下の３つです。

1. floatを指定するブロックには必ずwidth（幅）も指定する
   幅の指定単位はpxでもemでも%でもよいのですが、すべて同じ単位で指定しなければ表示が乱れる原因になります。
   また、%で指定するとIEでは表示が乱れる場合があります。
2. 必ず回り込みの解除（clear）を指定する
3. floatを指定した次のブロックに、floatもclearを指定していない場合、widthを指定しない（エラーになる）。
   エラーやレイアウトの乱れを防ぐためには、以下の点にも注意する必要があります（後述）。
   • ブラウザでのエラーを防ぐため、レイアウトに利用するブロックには（解除用のブロックは除いて）すべてfloatとwidthを指定します。
   • paddingとborderを、widthと同じセレクタで指定するとエラーになります。

floatの利用例−左寄せ

たとえば下の様なブロックがあったとします（分かりやすくするためブロックに背景色を表示しています）。

これら3つのブロックと解除に利用する空ブロック（中身が無いので表示はされない）のhtmlは↓の様になっています。
（解除のcssを指定するブロックに文字が入力されていても問題ありませんが、ここでは空白ブロックを利用します。）

１のブロックにfloat: left;を指定、幅はwidth: 300px;、つまり300ピクセルとします。
また、３のブロックの下に回り込み解除用の空白ブロックを記述し、clear: left;を指定します。

このような表示になります。

この例ではfloatを指定したボックスが1行分の高さしかないため、横には2番目のボックスしか入りません。
たとえば下の例のようにfloatを指定したボックスの高さが十分あれば、clearで解除するまでブロックが回り込みます。

解除用のブロックを２と３のブロックの間に入れた場合

こうなります。

floatの利用例−右寄せ

上の例のfloatをすべて右に寄せるrightに変更すると、下の様な表示に変わります。

以上がfloatの基本ですが、いくつか問題があります。

1. ブラウザの幅が狭くなると、回り込ませたブロックが重なる、または下に回りこむ
   このページのウィンドウ幅を変えて、レイアウトの崩れを確認してみてください。
2. ブロックの背景を指定していると、ブロック間の余白が目立つ

他にもブラウザの解釈や設定によって表示が異なる、ブロックの高さ（行数）によってレイアウトが崩れるなどの問題もあります。
問題を解決するために必要な方法を、次のページから紹介していきます。