3カラムレイアウト - 左右・センターの幅を計算

複雑な3カラム、事前に幅を計算して決めておく。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

3カラムレイアウト - 左右・センターの幅を計算

外枠ができたらまず2カラムを作るわけですが、その前にしっかりと左右・センター枠の幅を決めておきましょう。

2カラムの場合、外枠の幅から左右いずれかの幅を引けば、もう一方の幅が自動的に決まるわけですが、3カラムの場合、1つの枠を決めてもさらに2つの枠を作らなければなりません。

適当に枠を決めてしまった結果、本文記載スペースの幅が狭くなりすぎてしまったなどということにならないよう、事前に余白を含めたそれぞれの幅を決定しておきます。(仮に幅が思い通りにならなくても、CSSの指定をいじればすぐに修正することができますので、あまり厳密に考えなくても大丈夫ではあります。)

各枠のサイズの決め方

それでは、それぞれの枠サイズの決め方を説明します。ここでは外枠の幅を780pxに固定した場合を想定しています。

まずは余白の合計がいくつになるかを計算します。3カラムレイアウトの場合「左右、左とセンターの中間、センターと右の中間」と4つの余白を用意することになります。それぞれを10pxずつにすると、10×4で40pxとなります。

外枠780pxから余白分40pxを引いた740pxがそれぞれの枠に当てられる幅の合計最大値になります。

続いて左右のサイドバーの幅を決めます。ここは特にこれといった決まりはありませんので、センタースペースの幅が狭くなり過ぎない程度の幅にします。ここでは、一方を160px、もう一方を120pxにしておきます。

740pxから左右サイドバーの幅の合計280pxを引いた残りの460px。これがセンタースペースの幅になります。

[3カラムレイアウト各枠の幅の計算式]
余白幅×4 + 左 + センター + 右 = 外枠の幅
例:各余白を10pxずつ、左160px、センター460px、右120pxとする場合
10px×4 + 160px + 460px + 120px = 780px

以上のように、あらかじめ幅を計算して決めておくことで、その後の作業が楽になります。