float（フロート）を使った3段組カラム作成

次は3段組を作ってみましょう。「ナビゲーション」エリアを左に、「メインコンテンツ」エリアを真ん中、追加で「サブ」エリアを右側に配置します。

一見、複雑になったかのように見えますが、配置方法は先ほどの2段組と同じです。今回は「ナビゲーション」エリア<div id="navi">と「メインコンテンツ」エリア<div id="main">を包括する<div id="wapper">を作ります。ボックスを入れ子状態にするのです。

まず<div id="wapper">と<div id="sub">ボックスを左右にフロートします。次に<div id="wapper">の子ボックスにあたる<div id="main">と<div id="navi">を左右にフロートします。2段組のカラムの中の1つに、さらに2段組カラムが入ったように組むのです（リスト3、4）。

カラム作成の注意点

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

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

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

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

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