３．レフト、センター、フッターボックスで段組

本当なら、レフト、センター、フッターボックスを、
１ページずつわけて、説明したほうが、効率的なんですが、
この３つのボックスをつかって、<DIV>の段組をするので、
まず、この手順を解説します。

レイアウトの骨組みのような作業です。

各ボックスの細かい定義は、次のページからはじまります。

このページの文中のリンクは、すべて新しいウィンドウで開きます。

このページの完成サンプルはこちら >>

■レフトボックスの定義内容

このボックスは、段組するボックスだから、

float: left

と定義してあげます。
ちなみに、全体幅は190px。
内部に左からの間隔を15px空けたいので、padding: 0px 0px 0px15px
と定義して、
内容の横幅を定義するwidth:190pxから、-15pxしてあげて、
最終的に、width: 175px　という定義内容になります。

■センターボックスの定義

これも段組するボックスなので、float:leftを定義。
それから、センターボックスの全体幅の求め方ですけど、
まずベースボックスの横幅が615px。
続いて、レフトボックスの全体幅が190px。
レフトボックスとセンターボックスは、ヨコに段組するので、
ベースボックスの横幅から、レフトボックスの全体幅を引いた数。

615px - 190px = 425px

ということになりますよね。

そして、パディングの定義。
今回は、ヨコのパディングしかしてませんが、
左のパディングが5pxで、右のパディングが15pxとなっています。

合わせて20px。
これを、さっき求めたセンターボックスの全体幅から引いた数が、width属性で定義する、
センターボックスの内容の横幅ということになりますｗ

425px - 20px = 405px


■フッターボックスの定義内容
このフッターボックスで、レフト、センターでおこなった段組を解除してあげます。
そうしとかないと、レイアウトがうまく表示されないのでとっても重要です。

段組を解除するから、
clear: left
を定義。


縦幅は、このボックスに定義する背景画像の縦幅です。
↓背景画像
フッターボックスの背景画像


これで、WEBサイトの骨組みが出来上がりました。
あとは、各ボックスを定義してあげるだけです。