CSSに依るレイアウトの応用として、擬似フレームを考えて見ましょう。
擬似フレームとは、本物のフレームのように、文書の特定の領域に別の文書を表示させているように見せる技術です。
擬似フレームを実現するための最も簡単な方法はやはりフローティングを活用する事でしょう。
例えば、左にメニュー、右にコンテンツという場合は、まず以下のようなHTMLの雛形を用意しておきます。
<div class="menu">(メニューとなるHTML)</div><div class="main">(本文コンテンツとなるHTML)</div>
続いて、以下のようなCSSを当てておきます。
堀北真希うさぎ：平成元年〜 3年(西暦1989年〜1991年)のボシュロム製ソフトコンタクト『オプティマ』のCM風レンズ装着場面を含んだ仮想CM動画media="screen, projection"」属性が当てられているものとします。html, body {display: block;height: 100%;margin: 0;padding: 0;border: none 0;}div.menu {float: left;width: 30%;margin: 0;padding: 0;border: none 0;…}div.main {float: right;width: 70%;margin: 0;padding: 0;border: none 0;…}/* オペラ 6.x，インターネットエクスプローラ4.x/マック版5.x対策。 */@media screen {div.menu, div. main {height: 100%;overflow: scroll;}}@media projection {div.menu, div. main {height: 100%;overflow: scroll;}}
<html>要素と<body>要素でheightプロパティを100%と指定したのは、こうする事で、画面の高さを指定出来るからです。
ルート要素(HTML/XHTMLでは<html>要素)のブロックの大きさはブラウザに依る事とされており、ルート要素の大きさの初期値はブラウザのクライアント領域の大きさに依る事となります。
この場合に注意しなければならない事として、<html>要素と<body>要素に対して、displayプロパティを用いてブロックレヴェル式の表示形態としなければならないという事です。
inline」と仕様で定義されており、<html>要素及び<body>要素のデフォルトは「display: inline;」扱いになってしまいます。尚、<html>要素と<body>要素においては、marginプロパティ及びpaddingプロパティに0を当てておきます。
ここで、overflowというプロパティが出てきました。これは、widthプロパティとheightプロパティで横幅と高さをそれぞれ指定した際に、内容がボックスに収まらなくなった場合にどうするのかを指定するプロパティです。
ここでは、「scroll」値を指定する事で、内容が収まらない場合にはスクロールを発生させます。
では、overflowが正常に機能しません。
この為、オペラ 6.xではこのプロパティ定義を忌避する工夫が必要になります(つまり、これらのブラウザに対しては、擬似フレームを諦めるしかありません)。
擬似フレームには二つの問題点があります。
一つは上述の通り、一部の環境で正常に実現しないという問題があります。
そしてもう一つ、あくまでも擬似的なものであるという問題です。
通常、フレームで分割された文書は、独立して操作する事が可能です。
しかしながら、この方法では本当に擬似的なものでしかありません。
すなわち、上記のように左側にメニューを出して右側にコンテンツを擬似フレームで表わそうとした場合、左側のメニューにあるアンカーを指定する事で右側のコンテンツだけを入換えるという芸当は出来ません。
結局、擬似フレーム機能を実現するためには、全ての右側コンテンツ用の文書に、左側のメニュー項目を記述しなければならないと言う事になります。
しかしながら、実はこれは欠点と言うより利点と見る事も出来ます。
フレームの場合、コンテンツ側が幾ら変わっても、メニュー側は変わらないのが普通です。
そうすると、現在コンテンツ側に表示されている項目もメニューから選択可能なままになっている筈です。
現在見ているページが選択出来るというのは実は不便で、間違って余計な手間を閲覧者に掛けさせる恐れがあります。
ですから、却って擬似フレームの方が良いと言えるのです。
