今回はちょっとしたコーディングテクニックのお話です。

フッター全面に色が付いているデザインの場合、メインコンテンツの内容が少なかったりすると、
ブラウザとの間に隙間ができるというパターンがあると思います。

（フッターの装飾が上部ボーダーのみや、白グラデであれば問題ないのですが。）

これって、不細工じゃありませんか？

一昔前は、CSSテクをゴリゴリ使って、IE用にハック書いて・・・という手法が流行りましたね。

もっとカンタンにできる方法をあみ出し（たのか何処かで盗んだのか忘れましたが笑）て、
私は現在こういうテクを使っていますので紹介してみようと思います。
大抵のデザインで応用できますので、使ってみてください。

骨組みは以下のとおりにします。
ヘッダー、メインエリア、フッターをバラバラにするのがポイント。

<div id="header">
<div id="header-inner">
ヘッダー
</div>
</div>

<div id="wrapper">
<div id="wrapper-inner">
メインエリア
</div>
</div>

<div id="footer">
<div id="footer-inner">
フッター
</div>
</div>

まず、フッターで用いる背景がリピートできる場合（ボーダー柄など）は、その背景画像をbodyに入れます。
※背景がグラデになっている場合は、最下部の色を抽出して、同じく、bodyに入れます。

これでブラウザ全面、フッターの背景になります。

次に、ヘッダーに背景色（画像）を入れます。
全幅デザインの場合は、#headerに背景を入れます。

最後に、メインエリアに背景色（画像）を入れます。
例えば、背景が白地ベースのデザインの場合、#wrapperに白の背景色を入れます。

すると、コンテンツ容量が少なくて、フッターが上がってくる場合でも、
メインエリア以下が全てフッターエリアに見えます。

body {
background: url(footer.jpg);
}

#header-inner, #wrapper-inner, #footer-inner {
width: 900px;
}

#header {
background: url(header.jpg) repeat-x left top;
}

#wrapper {
background: #fff;
}

※コンテンツ幅は#XXX-innerで固定します。

また、この組み方だと、コンテンツ幅用の背景と、全幅背景が二つ使えて、
あらゆるデザインに対応できますので、どうぞ試してみてください!!

今週は東京ドームでライブだーーーー!!!!

また燃え尽きてきます。笑