CSSでの画面分割・部分固定

分割レイアウト

前提事項

ウインドウを分割し画面の一部をウインドウに対して固定する（逆に一部分だけがスクロールするとも言う）レイアウトは、昔はフレームを使って作るしかなかった。しかし、フレームには色々と問題があるため、今後そういったレイアウトではcssで実現していくことになる。

ここで重要なのは「position:fixed」の命令であるが、ブラウザによって解釈が異なる（特に1E6とIE7）ので注意。

IE6：fixedを無視する（位置設定なしと扱われる）
IE7：入れ子にした場合、親要素を無視してウインドウに固定
Opera、Firefox、Safari：親要素（なければウインドウ）に対して固定

そこで、cssを使ったWebデザインをするにあたり、IE6では固定デザインだが、IE7、Opera、Firefox、Safariでは画面分割・部分固定として動作するハイブリッドサイトを制作する。

以下そのサンプル（「縦2分割左上固定レイアウト」と「横2分割中央配置レイアウト」）と、相対的位置（主にセンタリングされた）に固定部分を作る方法。

縦2分割左上固定レイアウト

（１）基本的設定

ドキュメントタイプの設定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
内部スタイルシートの設定（全称セレクタ及びbodyのマージン＆パディング設定の初期化）
外部スタイルシートの設定（基本エレメントスタイルの定義）〔テンプレートの読み込み〕

（２）ブロック要素（div）の作成

レイアウトエディタ上に、ツールパレットからレイヤーを1つドラッグアンドドロップし、名前は「base」とする。
CSSエディタから、マージンとプロパティの設定を全て0に。サイズは、横幅はレイアウト全体の横幅（固定値でも相対値でも可能）を設定。縦は、オブジェクトの量によって変動可能なように「設定無し」とする。これがページ全体の基本の枠組みとなる。
位置は指定しない。色は固定部分（後述の「navigation」部分）に使いたい色を指定する。

次に、ツールパレットからレイヤーを二つ、入れ子にせずに【#base】内にドラッグアンドドロップする。名称を分かりやすいものに変更する。ここでは固定側を「navigation」スクロール側を「contents」とする。

（３）【#navigation】の設定

CSSエディタから、マージンとプロパティの設定を全て0に。
サイズは、横幅は固定値、相対値どちらかの任意の値を設定。縦は100％にする。
位置を「固定」（position: fixed）にする。しかし、IE6はfixedを無視するので、「設定無し」と同じ扱いとなり【#navigation】の下に【#contents】が並んでしまう。これを防ぐためにfixedを指定した上で、「_position: absolute」を追加する（ソースエディタで書き込む）。I6はアンダーバーを無視するので「絶対」指定と勘違いし、縦に並ばず重なる。位置設定として、上「0」左「0」とする。これにより、【#navigation】と【#contents】がウインドウ左上を基準に重なる。
色は「指定無し」にする（【#base】の色を透けさせるため）

（４）【#contents】の設定

【#contents】のサイズは、【#base】の幅から【#navigation】の幅を引いた値とし、縦は変動可能なように「設定無し」。
位置も指定しない。
代わりに、マージンの左に【#navigation】の幅を設定し、他のマージンとプロパティの設定は「0」にする。
これにより、【#navigation】との重なりを防ぐ。
色は【#base】とは異なる、スクロール部分に使いたい色を指定する。

（５）その他の設定

【#navigation】や【#contents】内には、マージンその他の目的でブロック要素を配置してもよい。それらの位置指定は基本的に「設定無し」でよい。サイズは絶対値または相対値で指定するか、指定無しの代わりにマージンをしっかり指定しておくこと（これらの設定がないと、スタイルシートで段落に境界線を指定したときに罫線が表示されない）。

備考

IE6の事を考慮しないなら、【#base】がなくてもレイアウトできる。ではなぜ【#base】をわざわざ作るのかというと、IE6で、【#navigation】が【#contents】と一緒にスクロールしたとき、その下側に空きが出来てしまうのを防ぐためである。同時に、【#contents】内に画面をスクロールさせるほどのコンテンツがない場合、【#navigation】の帯だけが下側にせり出して見えないようにするためでもある。

あと、【#navigation】は、【#base】内に配置しなくてもかまわない。Fixedまたはabsoluteで配置されているオブジェクトは、他の干渉を受けないからである。したがって、携帯用コンテンツとして作る場合に、メニューが毎回頭に表示されて邪魔であれば、記述を【#body】の後に持ってくるなどできる。

ソース（このページ）

* { margin: 0; padding: 0 }
body { background-color: white; background-image: url("bgimg/bgimg_3x3_line1.gif"); margin: 0; padding: 0 }
#base { background-color: #9c9; margin: 0; padding: 0; width: 700px }
#navigation { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 200px; height: 100%; _position: absolute }
#navigationmargin { margin: 10px; padding: 0 }
#contents { background-color: white; margin: 0 0 0 200px; padding: 0; width: 500px }
#contentsmargin { margin: 0 10px; padding: 10px 0 }