float（フロート）の概念

（画像をクリックすると別ウィンドウに拡大図を表示します）

カラム作成の注意点

前回のボックスモデルの解説で、ボックスを使用する際にwidth（幅）を指定したボックスでは、padding（内側の余白）とborderは指定しないという方法を実践しました。これはカラム作成でも同様です。

左カラムをfloat:leftでwidth:150px、右カラムにfloat:rightでwidth:200pxと指定した場合に、 それぞれにpaddingやborderを指定してしまうとWebブラウザによって異なった解釈が起こる可能性があり、レイアウトが崩れてしまいます。通称「カラム落ち」になります。

Firefoxなどのモダンブラウザでサイトを閲覧していると、時々このような「カラム落ち」を見かけます。これはIEを基準にコーディングして、モダンブラウザのチェックを怠っていると推測できます。CSSコーディングの鉄則は、まずモダンブラウザで検証し、その次にIEで検証をすること です。バグを抱えたWebブラウザの誤った解釈を基準にコーディングしてしまうと、今後IEのバージョンがあがり、CSSへの対応レベルが改善された場合、整合性があわなくなる可能性が高くなります。

前回のボックスモデルと今回のフロートを使用したカラム作成で、大枠のCSSレイアウトが組めるようになりました。

次回は、リストタグを使用したナビゲーション作成です。Webサイトに必須となるユーザインターフェイスの核ですのでぜひマスターしましょう。