CSSでの疑似フレームの作り方

構成

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

作り方

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

(1)新規ページを作成

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

(2)CSSエディタで基本的な部分を定義

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

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

(3)レイヤー(divブロック)を作成

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

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

(4)レイヤーの編集

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

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

(5)マージンと背景色の設定

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

  1. divブロック内にツールパレットからレイヤーをドラッグアンドドロップ
  2. レイヤーパレットから名前を変更(例えば#menumargin、#mainmargin)。
  3. マージンはすべての部分に任意のpxで、パディングはすべて「0」
  4. ブロックプロパティから「幅」「高さ」を「変更無し」に設定 ※
  5. 「ブロックプロパティ/クリッピング/オーバーフロー」を「変更無し」に
※幅と高さを未設定にすると、GoLiveのメイン編集画面上で枠が表示されなくなるが、機能は生きている(ソース画面同時表示にして確認しながら作業すると良い)。また100%にするとマージン分だけ外枠がふくれてレイアウトが崩れる(余分なスクロールバーが出る)ので注意

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

(6)文字スタイルの設定について

文字のスタイルを設定する必要がある。特に、リスト表示については、インデントなどを初期化しているので、必ず設定すること。外部スタイルシートで文字スタイルを設定する際、このレイアウトでは全てのコンテンツを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要素の編集が肝になる。