トップページ > 便利な小技 > ヘッダーとメニューを固定する

CSSレイアウト[便利な小技]

ヘッダーとメニューを固定する

[注意] 残念ながら「position: fixed;」はWINのIE(4〜6)では対応していない
FireFoxなどで見てください。

このページをスクロールしてみると、他のページと異なり、ヘッダーとメニューがウィンドウに固定され、メインスペースのみがスクロールする。
「position: fixed;」を使うと、フレームセットのように画面の一部を固定させ、それ以外の部分のみスクロールするように作ることが出来る。

フレームに代わる画期的なCSS、と喜んだのも束の間。
なぜか、Mac IE5やNNで使えるのに、WINのIEでは使えないCSSだった。というわけでハッキリ言って使えない小技だが、一応作り方を解説する。

ボックスを固定するには

「2段組のレイアウト」で「position: absolute;」の説明をしたが(→「position: absolute;」についてはこちらを参照に)、同じpositionプロパティの値「fixed」も、他の要素の配置に一切影響を与えなくなる。「position: fixed」を指定すると、絶対位置に固定される。

図説 このページは、右図のように、「#header」「#side」そして「#headersubmenu」に絶対位置固定のfixedを指定している。
「#header」「#headersubmenu」は上からの位置は0px。「#side」は#headerの高さの分下げなくてはならないので、上からの位置は116pxに指定する。「#header」と「#side」の左からの距離は、親ボックスにピッタリでよいので省略。(#headerの親ボックスは<body>。#sideの親ボックスは#outline。)

ここで注意したいのは、「#outline」ボックスの位置。#headerがfixed指定されたことで、#outlinebgには影響を及ぼさなくなったので、このままだと#outlineはウィンドウのトップにくっついてしまう。
そこで、「#outline」にも、margin-top: 116px;の指定をしなくてはならない。

このページのCSSは下記の通り。
#header {
position: fixed;
top:0px;
}
#side {
position: fixed;
top:116px;
}
#headersubmenu{
position: fixed;
↑ #headersubmenuはもともとposition:absoluteで位置指定しているので、ここで再指定は不要。
}
#outline {
margin-top: 116px;
}
HTMLは変更する必要は無い。