3カラム用レイアウト枠の幅を決める

レイアウト枠を作成したら、レイアウト全体の幅、左サイドの幅、メイン部分の幅、右サイドの幅をそれぞれ決めていきます。

3カラムレイアウトのカスタマイズ方法 （STEP 2）

■ STEP2　レイアウト枠の横幅を決める

まず、レイアウト全体（#container）の幅は、固定幅の場合、2カラムレイアウトより広げて700～800pxぐらいまでにします。800pxまでというのは、「800×600」の画面を利用しているユーザーを考慮しています。

■ 3カラムレイアウト（固定幅）の構造図

#container #banner #left #center #wrapper #right #footer

次に、右サイド枠（#right）の幅と、#wrapper（左サイドとメインを囲んだ枠）の幅を考えます。

右サイド枠（#right）の幅は、左サイド枠（#left）とメイン枠（#center）を囲んだ枠（#wrapper）の幅と足して、レイアウト全体（#container）の幅以下になるように設定します。もし２つの枠の幅を足した値がレイアウト全体幅を超えてしまうと収まりきらないため、レイアウトが崩れてしまいます。

左サイドとメインを囲む枠（#wrapper）の幅＋右サイド（#right）の幅 ≦ レイアウト全体（#container）の幅

例の場合は、下記のようになります。
620px（左サイドとメインを囲む枠） ＋180px（右サイド） ≦ 800px（レイアウト全体）

同様に、
左サイド枠（#left）の幅は、メイン枠（#center）の幅と足して、その２つを囲んだ枠（#wrapper）の幅を超えないようします。

左サイド（#left）の幅+ メイン（#center）の幅 ≦左サイドとメインを囲む枠（#wrapper）の幅

例の場合は、下記のようになります。
180px（左サイド）＋440px（メイン）≦620px（左サイドとメインを囲む枠）

＜CSS の記述例＞

#container { width: 800px; } #banner { width : 800px; } #wrapper { float: left; width: 620px; } #center { float :right; width: 440px; } #left { float: left; width : 180px; } #right { float: right; width : 180px; } #footer { width : 800px; }

可変幅の場合は、「px」ではなく、「%」で指定すると、画面に応じてスクロールされます。基本的に固定幅の場合と同じ考え方で、あるレイアウト枠の中にあるすべてのレイアウト枠の幅を足した値が「100%」を超えないようにします。

以上、3カラム用レイアウト枠の幅の決め方を説明しました。
次回は、さらに余白などを調整する方法について説明します。

[次の講義へ] 余白を調整する

参考になりましたら、応援お願いします。