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は下記の通り。
position: fixed;
top:0px;
}
#side {
position: fixed;
top:116px;
}
#headersubmenu{
position: fixed;
↑ #headersubmenuはもともとposition:absoluteで位置指定しているので、ここで再指定は不要。
}
#outline {
margin-top: 116px;
}
HTMLは変更する必要は無い。