CSSによる疑似フレームの作り方

構成

サイトの縦横幅を100%で作り、bodyのプロパティからウインドウ全体のスクロールバーを消し、代わりに一部のdivブロックにスクロールバーを付け、これをウインドウ全体のスクロールバーと同じように見せかける。

作り方

ここでは、縦分割（ウインドウ左側に固定メニューがあり、右側はウインドウサイズに追随するタイプ）の疑似フレームページをつくる。

（１）新規ページを作成

ドキュメントタイプ宣言は、トランディショナル有り。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

（２）CSSエディタで基本的な部分を定義

ブラウザによって「Width」にパディングやボーダーを含む含まないがあり、デフォルトのインデントの定義もまちまちなので統一する。

【*】（全称セレクタという。デフォルト設定のようなもの）マージンとパディングのすべてを「0」に
【body】マージンとパディングのすべてを「0」、「ブロックプロパティ／クリッピング／オーバーフロー」を「非表示」に

（３）レイヤー（divブロック）を作成

ツールパレットから、2つの「レイヤー」（divブロック）をメインウインドウにドラッグアンドドロップする。その後、レイヤーパレットからそれぞれを分かりやすい名前に変更する。

この解説では、固定したい方を「menu」、スクロールさせたい方を「main」とする。

（４）レイヤーの編集

CSSエディタには、2つのdivブロックは、IDスタイル（#で始まる）で追加されている。それぞれについて、以下のように設定を行う。

【#menu】（固定する側）
- マージンとパディングのすべてを「0」に
- ブロックプロパティから「幅」を任意のpxで、「高さ」を「100%」に設定
- 「ブロックプロパティ／位置」では「位置」を「絶対」、「上」「左」を「0px」に
【#main】（スクロールする側）
- マージンは「左」を#menuで設定した「幅」、他は「0」に。パディングはすべて「0」に
- ブロックプロパティから「幅」を「変更無し」で、「高さ」を「100%」に設定
- 「ブロックプロパティ／位置」では「位置」を「変更無し」、上左「変更無し」に
- 「ブロックプロパティ／クリッピング／オーバーフロー」を「自動」に

（５）マージンと背景色の設定

マージンをとる場合は、そのdivブロック内に、更にdivブロックを配置してマージンを設定していく。

divブロック内にツールパレットからレイヤーをドラッグアンドドロップ
レイヤーパレットから名前を変更（例えば#menumargin、#mainmargin）。
マージンはすべての部分に任意のpxで、パディングはすべて「0」
ブロックプロパティから「幅」「高さ」を「変更無し」に設定　※
「ブロックプロパティ／クリッピング／オーバーフロー」を「変更無し」に

※幅と高さを未設定にすると、GoLiveのメイン編集画面上で枠が表示されなくなるが、機能は生きている（ソース画面同時表示にして確認しながら作業すると良い）。また100%にするとマージン分だけ外枠がふくれてレイアウトが崩れる（余分なスクロールバーが出る）ので注意

背景色は、各div要素に対して背景のプロパティから設定する。

（６）文字スタイルの設定について

文字のスタイルを設定する必要がある。特に、リスト表示については、インデントなどを初期化しているので、必ず設定すること。外部スタイルシートで文字スタイルを設定する際、このレイアウトでは全てのコンテンツをdiv要素の中に含めてしまうので、body要素の文字設定をする必要はない。

設計のポイント

スクロールする側のボックスの表示位置を、「位置」ではなく「マージン」の設定で決めてしまうのがポイント（「位置」で指定すると、個別にスクロールさせることが出来ない）

横分割の場合

横分割（ウインドウ上側に固定メニューがあり、下はウインドウサイズに追随するタイプ）の疑似フレームページをつくる場合の変更点。

#menuの「高さ」任意のpxを指定し、「幅」は「100%」に
#mainの「幅」「高さ」を「100%」に、位置は「変更無し」上左は「変更無し」
#mainmarginのマージン「上」に、#menuの高さ＋マージン分の数値を指定。他はマージン幅を各入力。
各div要素の重なり順を調整（「ブロックプロパティ／位置／重ね順」で、#menuは「1」、#mainは「2」を入力）

横分割の場合、#menuと#mainは重ねて配置し、#menuの下を#mainがくぐり抜けるようにする（重ね順の設定を行う）。#menuには、背景色を指定するなどして#mainが裏側をくぐっていることが分からないようにする（#menuの背景色を設定する方法は、スクロールバーが隠れるため使用不可）。#main側は、#mainmarginの上方向にマージンを設定し、初期表示状態で重なって表示されないようにする（#mainの上方向にマージンやパディングを設定する方法は、一部のブラウザで表示が崩れるため使用不可）。

注意点

Safari（Mac）、Opera（Win）、Firefox（Win）では支障ないのだが、IE7（Win）ではウインドウを縮小したときに、#mainボックスのコンテンツの縮小許容範囲を超えるとスクロールバーが消失する。

補足

オーバーフロー

表示内容が表示サイズ以上である場合どうするか、の設定項目。表示サイズが％表示されているかいないかで、多少意味合いが異なる。

表示サイズが％指定されていない場合、divとbodyへの指定は干渉しない。

「変更無し」「表示」「auto」サイズを超える場合、ウインドウ／divブロックの端に、必要な向きにスクロールバーを表示。
「スクロール」サイズを超える超えないにかかわらず、ウインドウの端に、縦と横のスクロールバーを表示。
「非表示」スクロールバーは付けない。

表示要素のサイズが％指定されている場合でbodyが「変更無し」「表示」「auto」の場合、divへの指定は次の動作になる。

「変更無し」「表示」サイズを超える場合、ウインドウ／divブロックの端に、必要な向きにスクロールバーを表示。
「スクロール」表示要素のサイズにかかわらず、divブロックの端に、縦と横のスクロールバーを表示。
「非表示」スクロールバーは付けない。
「auto」サイズを超える場合、divブロックの端に、必要な向きにスクロールバーを表示。

表示要素のサイズが％指定されている場合でbodyが「非表示」の場合、divへの指定は次の動作になる。

「変更無し」「表示」スクロールバーは付かない。
「スクロール」表示要素のサイズにかかわらず、divブロックの端に、縦と横のスクロールバーを表示。
「auto」サイズを超える場合、divブロックの端に、必要な向きにスクロールバーを表示。

レイヤー

<div>（汎用ブロック要素）を使ったレイアウト機能をGoLiveではレイヤーと呼んでいる。あくまで<div>機能の一部を使って実現している機能であるから、CSSエディタからレイヤーのプロパティを変更していくと、GoLiveで規定するレイヤーの概念から外れてレイヤーとして認識しなくなる（レイヤーパレットにも表示されなくなる）。GoLiveでは、メインの編集画面にdivブロックを配置する方法がレイヤーしかなく、またその名前変更もレイヤーパレットからしか行えないため、一旦レイヤーとしての操作を介するが、作業のほとんどはCSSエディタからのdiv要素の編集が肝になる。