スタイルシートによる疑似フレーム
今回はスタイルシートでフレームを偽装してみたいと思います。
フレームを使ってあると、一々メニューのページに戻らなくても、前後だけでなく他のページに飛べ、スクロールしても常にナビゲーションが表示されているのは便利です。 しかし、検索エンジンや他のサイトのハイパーリンクなどから飛んできた場合にはナビゲーションが表示されません。 もちろんフレーム未対応のブラウザ等でも表示されません。
そこで、実際にはフレームを切らずにフレームをCSSを使って偽装してみたいと思います。
始めに
HTMLのバージョン
これは「HTML 4.01 Transitional」で「loose.dtd」は指定しないで下さい。「loose.dtdを指定すると疑似フレームにはならずレイアウトが崩れます。
必ず<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">で宣言してください。
「HTML 4.01 Transitional」での注意点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">でレイアウトする際の注意。
DOCTYPE宣言を「HTML 4.01 Transitional」で、「font-size」を「medium」「small」等の「keyword」で指定すると ブラウザによって初期値が異なります。 Win ieでは「small」=「100%」Mozillaなどでは「medium」=「100%」となりブラウザによって表示サイズが区々になります。
そのため、「font-size」は「%」「em」等の単位をつかった相対値で指定する事をお勧めします。
「font-size」を相対値で指定する場合の注意点
「font-size」を「%」「em」等の単位をつかった相対値で指定する場合の注意。 「100%」=「1em」「90%」=「0.9em」ですが、例えば、「font-size」を「90%」で指定した要素の中でさらに「font-size」を「90%」を指定すると、「90%」の「90%」となり更に小さくなります。 3つ以上の要素の入れ子の場合は継承されません。
ベース
ボディ要素
まず、始めに、というか取りあえず全ての「margin」と「padding」を消します。
スタイルシートでレイアウトするときは、ブラウザによって、「width」の値に「padding」や「border」を含んだり含まなかったり、デフォルトのインデントの値が違ったりとまちまちなので、取りあえず全ての「margin」と「padding」を消して、必要な要素にはそれぞれ「margin」と「padding」を入れていきます。
全称セレクタ「*」と「body」を「0」にします。
* {margin:0; padding:0;}
「body」の「overflow」を「hidden」にします。
body {margin:0; padding:0; overflow:hidden;}
基本の段組
次に「div」を使ってボックスを2つ作り、それぞれにIDを指定します。
ここでは、1つ目、左ナビゲーション用に「leftbox」、
2つ目に「mainbox」とIDを指定します。
「leftbox」の全ての「margin」と「padding」を「0」にします。
「height」を「100%」にします。
「width」を任意の幅に指定します。
ここでは仮に「15em」とします。
「position」を「absolute」、「left」と「top」を「0px」に指定します。
「mainbox」の全ての「padding」を「0」にし、上下右の「margin」も「0」にして消します。
｢左margin」を上で指定した「leftbox」の任意の「width」に合わせます。
「height」を「100%」にします。「width」は指定しません。
更に、「overflow」を「auto」にします。
これで基本構造が出来た事になります。
ここまでに指定されたソース
HTML部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div id="leftbox"></div>
<div id="mainbox"></div>
CSS部分
* {margin:0; padding:0;}
body {margin:0; padding:0; overflow:hidden;}
#leftbox {margin:0; padding:0; height:100%; width:15em; position:absolute; left:0; top:0;}
#mainbox {margin:0 0 0 15em; padding:0; height:100%; overflow:auto;}
「margin」「padding」の設定
次に、見やすいレイアウトにするため、「*」「body」で消したデフォルトの「margin」「padding」をそれぞれ指定します。
「leftbox」「mainbox」の「padding」は消していてここに「0」以外を指定するとレイアウトが崩れるので、 中にコンテンツを入れる際は、それぞれに「margin」「padding」「width」を指定します。
「leftbox」の中に「id」で指定した「div」要素を入れ指定します。ここではID名を「leftnavi」とし、「width」に「leftbox」より小さめに「12em」、（「leftbox」に「overflow」でスクロールバーを表示させるときは横スクロールバーが出ないように特に注意してください。） 左「margin」に「1.8em」を指定します。トップは任意で、右及び下は特に必要ではないので「0」にします。
【例】#leftnavi {margin:0 0 0 1.8em width:12em}
「maintbox」の中に「id」で指定した「div」要素を入れ指定します。ここではID名を「mainin」とし、「width」「margin」を指定します。 「width」を指定するときはサイズ固定の「px」で指定するとウィンドウの幅を狭めた時にボックスの幅が大きくなると、右のスクロールバーが消えてしまうので相対値でして下さい。また「font-size」によって左右される「em」では指定しない事をお勧めします。
ここでは「width」「80%」とし、左「margin」に「2em」を指定します。「width」「80%」の場合右「margin」は必要ないので、上下に任意の数値を入れます。
【例】#mainin { width:80%; margin:0 0 0 2em; padding:1em 0 30px 0;}
注意：operaでレイアウトが崩れるのを防ぐため「mainin」の「margin-top」プロパティは必ず「0」にしてください。また「mainin」の中で最初に記述する要素の「margin-top」も「0」にしてください。スペースを空けるときは「mainin」の「padding-top」に入れてください。
上記をふまえ「maintbox」に見出し、テキストを入れ、「leftbox」にリストタグでナビゲーション用リンクを置き、それぞれに適当に「margin」「padding」を指定します。
このサンプルでは「body」の「font-size:100%」でそれぞれのタイトルを除く要素は「font-size:90%」で指定しています。 個人的見解ですが、子供の絵本みたいな大きなフォントサイズで一度に表示される内容が少なく、一々スクロールしなくてはならないページもそれはそれで使いづらいので。
ダブルナビゲーション
これで、一応は「スタイルシートによる疑似フレーム」完成ですが「leftbox」の表示領域が固定され、貼れるリンクの数が限られてしまうので、（「leftbox」の「overflow」を「auto」に指定すればすむという突っ込みは置いておいて、）リストタグを横並びにして、トップにももう一つナビゲーションをつけてみます。 リストタグを横並びにするにはこちらのページのサンプルM N Oを参照ください。
「div」でボックスを作り「id」を指定して、「position」「absolute」で任意の場所に配置します。ここでは、HTMLの最後に記述しているので、わざわざ記述する必要はないかと思いますが、それ以外の場合は「z-index」でレイヤーが一番上に表示されるようにしてください。
念のため、実用的ではない左ボックスにもスクロールバーをつけたサンプルを見る。
これで、Win IE、NN7、opera7、Firefox1、で「スタイルシートによる疑似フレーム」が完成です。
未対応ブラウザ
Mac IE5では一応「疑似フレーム」にはなるのですが、このレイアウトに限らず時々「overflow」のスクロールバーが表示されなくなるバグがあります。 つまり右に配置した「maintbox」のウィンドウからはみ出た部分が表示されない事が起こりえます。
そこで、ここではMac IE5が外部CSSにおける@importをサポートしていないのを利用して、バグが起こる要素を別ファイルに出して@importを使ってインポートさせます。ちなみにNN4x、WinIE3以前でも@importはサポートしていません。IE3に関してはMicrosftがセキュリティ問題のため推奨の最新バージョン以外はサポートしていないので敢えて考慮する必要もないと思われます。
この擬似フレームは、80%近くのシェアを持ちながら「position:fixed」をサポートしていないWIN IE6をメイン・ターゲットにしたものです。
この擬似フレームをWIN IE6用にし、それ以外の比較的新しいブラウザ（この場合@importに対応しているを目安）に関しては「position:fixed」を適用させるように変更してみましょう。 これは、最近シェアを伸ばしているFirefoxやMacIEの「overflow:auto;」上ではマウスホイールや「PgDn」のキーが使えない等のバグ対策でもあります。また、この方法ですとMAC IEでも上記(打ち消し線部分)のバグが回避されます。
変更は、こちらのページの「外部CSSパスの書方によるブラウザの対応」にある「WIN IEのみCSSを読ませる。その弐」の「_」( Underscore )を使用した方法で行います。
まず、「mac.css」は必要なくなるので破棄。
左のボックス部分の配置「position」の値を「fixed」にする。
#leftbox {
position : fixed ;
_position : absolute ; /* WIN IE用 */
}
WIN IEはposition : fixed に対応していないので、IE用にプロパティの頭に「_」をつけてabsoluteを指定する。
body { _overflow : hidden ; } /* WIN IE用 */
body部分のと、メイン部分の「overflow 」指定をWIN IEのみに読ませるようにする。
#main { _overflow : auto ; } /* WIN IE用 */
前回と今回指定したソースを見比べてみましょう。
前回、指定されたソース
HTML部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div id="leftbox"></div>
<div id="mainbox"></div>
CSS部分
* {margin:0; padding:0;}
body {margin:0; padding:0; overflow:hidden;}
#leftbox {margin:0; padding:0; height:100%; width:15em; position:absolute; left:0; top:0;}
#mainbox {margin:0 0 0 15em; padding:0; height:100%; overflow:auto;}
今回、指定されたソース
HTML部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div id="leftbox"></div>
<div id="mainbox"></div>
CSS部分
* {margin:0; padding:0;}
body {margin:0; padding:0; _overflow:hidden;}
#leftbox {margin:0; padding:0; height:100%; width:15em; position:fixed; _position:absolute; left:0; top:0;}
#mainbox {margin:0 0 0 15em; padding:0; height:100%; _overflow:auto;}
変更したのは、青文字の部分のみです。 その他は「margin」「padding」の設定などは特に変更はありません。それ以外上記で指定しているスタイルを変更するとレイアウトが崩れる可能性があります。
また、上で紹介した「ダブル･ナビゲーション」等のように、左ナビゲーション以外のボックス要素を固定させたい場合は、その要素に position:fixed; _position:absolute; と配置したい位置を指定してください。
以上で「擬似フレーム」は完成ですが、「擬似フレーム」とただ呼ぶよりも、「position:fixedをサポートしていないWIN IEのための」と枕詞を付けたほうが正確かもしれません。
因みに、新しいWinIE7において、「position:fixed」サポートされるそうです。 「_」の対応がどうなるか分かりませんが、IE7がリリースされ、普及した場合はには「_」（_上記のソースではposition:absolute;と_overflow:hidden;と_overflow:auto;）の部分の指定を削除すれば問題ないはずです。
参照：
IEBlog
この、背景がクリーム色の部分は2005.10.05に追記されました。
script等を使ってCSSファイルを振リ分けてお使いになってももちろんOKです。
ちなみにNN4xでは左右に段組された状態で、ページごとスクロールします。
更新管理
これで、「擬似フレーム」そのものは完成したわけですが、まだ１つ問題が残ります。フレームを切らないという事は、同じナビゲーションを複数ののファイルに記述しなくてはならないということです。もし、PHPを使えるサーバを利用されているなら「include」を使って繰り返し表示させる必要があるものを取り込むという方法をお勧めします。PHP includeについては Webビジネスコンサルタントのネタ帳のサイトで、詳しく説明されています。
その他の注意
「overflow」を使って疑似フレームを作っています。 よって、「overflow」上でマウスホイールによるスクロールが出来ない仕様のブラウザでは、それに準じた動作になります。 OPERA7ではページ内部のアンカーが認識されません。OPERA8では対応しているようです。
シェア70%を占めるWinIEが、「position:fixed」をサポートするようになれば、もっとシンプルな方法で、もっと色々なレイアウトが可能になるのにと思いました。
December 1st 2004
