このページはCSSを使った、縦分割の擬似フレームのサンプルページです。
表示確認は以下の環境で行っております。
- OS
- Windows XP
- ブラウザ
- Internet Explorer6.0
- Mozilla Firefox1.0.7
- Netscape Navigater7.1
- ディスプレイ解像度/同時発色数
- XGA (1024×768)/32ビット
概要
CSSの指定でヘッダーボックスとフッターボックスを固定し、擬似的にフレームページと同様の表示を可能とするものです。
今回のサンプルは「position:fixed」を使用せず「position:absolute」のみで実現しています。
そのためWin IE用などに特別なハックを用いる必要はありません。
また、この縦分割の擬似フレームサンプルでは標準準拠・後方互換の両モードでの表示の違いは特にはありません。
モード選択の際には、擬似フレーム以外のデザイン要素を優先的に考えて頂いて大丈夫です。
（あくまで擬似フレームを作り出す仕組みに関してのみ、モードの違いは影響しないということです）
管理のしやすさを優先させたりSEOを考慮するなど、自分の好きな順序で記述して大丈夫です。
注意
スクロールバーは、コンテンツボックスに指定した「overflow:auto」によって表示されています。
そのため、そのままではz-indexによってヘッダーとフッターをコンテンツよりも前面に配置しているので、ヘッダーとフッターの部分だけスクロールバーが隠れてしまいます。
これを回避する為に、ヘッダーボックスとフッターボックスをそれぞれスクロールバーの幅分（およそ15〜17px）左にずらして配置する必要があります。
（今回はpositionで調整しましたが、別にmarginでもかまいません）
しかし、ヘッダーとフッターを左にずらしただけではその内包要素まで左にずれてしまい、画面外に隠れてしまいます。
そこで、それぞれの内包要素については、最低でも同じ幅分を右にずらし直す必要があります。
また先述したように、コンテンツボックスに指定した「overflow:auto」によってスクロールバーを表示させているので、ブラウザによってはマウスのホイールでスクロールさせることができません。
（直接スクロールバーをマウスで操ってスクロールさせることは可能です）
その他、ヘッダーとフッターには必ず背景を指定するようにして下さい。
背景指定が無ければ、スクロールした時にコンテンツの内容とヘッダーとの内容が重なり合って見えます。
背景を指定することで初めて、スクロール時にコンテンツがヘッダーの下に滑り込むように（隠れるように）なります。
補足
このサンプルや元記事では、それぞれのボックスの内包ボックスとしては、コンテンツボックス内の<div id="contents-inner">〜</div>しか記述していません。
これは、コンテンツボックス内が一番内容量が多くなるだろうというだけのことで、ヘッダーやフッターも、内包要素の量によってはインナーボックスを作って一括でmarginやpaddingの指定をした方がいいと思います。
以前の左右分割の擬似フレームに比べ、今回のやり方の方が応用が利きます。
縦分割以外に左右分割も可能ですし、それらを組み合わせてコの字型や逆コの字型の擬似フレームを作り出すことも可能です。
色々と試してみても、面白いんじゃないでしょうか。
他にも、このサンプルのようにヘッダーにページ内ナビゲーションを置くなどの場合、少し工夫をしておかないと、頭出しをする場所がbodyの先頭なので、ヘッダーブロックに隠れてしまいます。
回避方法については、このサンプルのソースをご覧いただければわかると思います。
また、このサンプルはあくまでCSSによって擬似的にフレームページのような表示を作り出しているに過ぎません。
実際にフレームでページを分割表示させているわけではないので、フレームの利点（ナビゲーション用のファイルを編集するだけで全ページのナビゲーションが更新される、など）まで得られるものではありません。
ブログなどではメニュー部分（月別アーカイブリストやカテゴリーリストなど）もテンプレートを編集するだけで全ページが更新されることになりますが、普通のサイトではそうもいきません。
そこで、PHPが利用できる環境であるなら、includeでナビゲーションの呼び出しを行うようにすれば、ナビゲーションの編集は1度で済むので、管理の面でもフレームを利用した場合と同等の便利さが得られると思います。
（管理人はPHPに関しては目下勉強中ですので詳しい説明はできませんが…）
以下、スクロールテスト用の余白。
↓↓↓
↑↑↑
スクロールテスト終了