擬似フレームサンプル

このページはCSSを使った擬似フレームのサンプルページです。
表示確認は以下の環境で行っております。

OS

Windows XP

ブラウザ

Internet Explorer6.0
Mozilla Firefox1.0.7
Netscape Navigater7.1

ディスプレイ解像度/同時発色数

XGA (1024×768)/32ビット

概要

CSSの指定でナビゲーションボックスを固定し、擬似的にフレームページと同様の表示を可能とするものです。
「position:fixed」に対応していないWin IE6.0用にアンダースコア・ハックを使用し、表示確認をした上記の環境であれば同様の表示を得られます。
（アンダースコア・ハックについてはアンダースコア・ハック(Underscore Hack)を参照）

また、この擬似フレームサンプルでは標準準拠・後方互換の両モードでの表示の違いは特にはありません。
モード選択の際には、擬似フレーム以外のデザイン要素を優先的に考えて頂いて大丈夫です。
（あくまで擬似フレームを作り出す仕組みに関してのみ、モードの違いは影響しないということです）

また、(X)HTMLソースの記述順は、コンテンツが先でもナビゲーションが先でも問題ありません。（同様の表示になります）
管理のしやすさを優先させたりSEOを考慮するなど、自分の好きな順序で記述して大丈夫です。

注意

コンテンツ/ナビゲーションの各ボックス内の要素に対するレイアウト指定については、直接コンテンツボックスやナビゲーションボックスにmarginやpadding（特に左右方向）を指定すると表示が崩れる恐れがあります。

対処としては、コンテンツ/ナビゲーションの各ボックス内にさらにボックスを入れ子にするなどして、その入れ子にしたボックスに対してmarginやpaddingなどの指定をすれば大丈夫だと思います。

また、bodyやコンテンツボックスに背景画像を指定する場合、「background-attachment:fixed」を指定しないとIE以外では背景も一緒にスクロールします。背景を固定表示したい場合は一緒に指定して下さい。
（特に格子状や横縞の背景は、スクロールすると目がチカチカして気になると思います）

その他、ナビゲーション位置を右に固定するとIEとそれ以外でスクロールバーの表示が異なります。（下図参照）

IEでのスクリーンショット

Firefoxでのスクリーンショット

これは、IEでのスクロールバーはコンテンツボックスに設定した「overflow:auto」によって表示され、その他のブラウザでは通常のスクロールバーが表示されていることによる違いです。
操作等には影響はありませんが、気になるようならナビゲーションは左に固定した方が無難でしょう。

補足

このサンプルはあくまでCSSによって擬似的にフレームページのような表示を作り出しているに過ぎません。
実際にフレームでページを分割表示させているわけではないので、フレームの利点（ナビゲーション用のファイルを編集するだけで全ページのナビゲーションが更新される、など）まで得られるものではありません。

ブログなどではメニュー部分（月別アーカイブリストやカテゴリーリストなど）もテンプレートを編集するだけで全ページが更新されることになりますが、普通のサイトではそうもいきません。

そこで、PHPが利用できる環境であるなら、includeでナビゲーションの呼び出しを行うようにすれば、ナビゲーションの編集は1度で済むので、管理の面でもフレームを利用した場合と同等の便利さが得られると思います。
（管理人はPHPに関してはほとんど知識がありませんので詳しい説明はできませんが…）

以下、スクロールテスト用の余白。
↓↓↓

↑↑↑
スクロールテスト終了

作成日:2006/4/12(Wed）