ヘッダーとフッターを固定して、PNGの透過画像を用いて立体的に見せる（IE6対応）

Web CSS

バリエーションとして覚えておこうと思う。


HTMLとCSSだけで、ヘッダーとフッターを固定して表示させるにはCSSのpositionプロパティでfixedを設定する。
これは閲覧者のブラウザに対して固定した位置に配置することができるので、スクロールしても配置がずれないようにすることができる。

CSSだとこんな感じ

body {
    margin: 0px;
    padding: 0px;
}
#header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
}
#footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
}

ただしこれだとIE6以下の場合上手く表示されない。
そのため、IEの独自拡張CSSを追加する。

body {
    margin: 0px;
    padding: 0px;
    /* IE6対策（スクロール時の表示ブレ防止） */
    background-image : url("dummy");
    background-attachment: fixed;
}
#header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    /* IE6対策（位置固定） */
    _position: absolute; 
    _top: expression(eval(document.documentElement.scrollTop+0)+'px');
}
#footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    /* IE6対策（位置固定） */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-100)+'px'); /* 高さ100pxの場合 */
}

こんな感じ。
HTMLはこんな感じ。

<body>
<div id="header">
	ヘッダー
</div>
<div id="main-container">
	コンテンツ
</div>
<div id="footer">
	フッター
</div>
</body>


次に、CSSで背景画像で透過PNGを使う場合のIE6対応。
最近ではIE6に透過PNGを表示させるツールがいろいろありますが、今回は「DD_belatedPNG」を使います。
これの良いところはCSS背景透過画像のリピートに対応など、他のツールにない様々な対応が完璧にできています。

ということで、headでこのJSを読み込んで、透過させるセレクタ名を記述します。

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('#header, #footer');</script>
<![endif]-->


これで完璧！
【サンプルで作ったページ】


あとはz-indexプロパティで重ねたりすれば、より立体的な表現ができます。