隙間を埋める！フッターをウィンドウ下部に固定する3つの方法

モモコ

2012.07.24

html要素とbody要素に背景色を指定する

【css】

html{
     background-color:#333333; /*フッターの色を指定*/
}
body{
     background-color:#ffffff;
}

必要な記述はこれだけです。
あとはお好みでフッターの背景色と合わせたり、グラデーションを指定して端の色と合わせたりすると綺麗ですね。
ただ、あまりにもコンテンツが少ないと、画面の殆どが背景色で埋まるのが難点です…。

【HTML】

<script type="text/javascript" src="path/footerFixed.js"></script>

head内でjsを読み込ませ、フッター部分にid=”footer”を指定すれば自動でウィンドウの一番下にフッターを配置してくれます。
「footerFixed.js」は必要な記述が少なく、フッターを固定するjsの中で特に使いやすかったのでオススメです。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

この記事のシェア数

モモコデザイナー / 野口朋子

デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。