【#base】

css_box1_bgfix：背景固定1ボックス

* { margin: 0; padding: 0 }
body { background-image: url("bgimg.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center 0; margin: 0; padding: 0 }
#base { margin: 0 auto; padding: 0; width: 700px }
#main { visibility: visible; margin: 0 10px; padding: 10px 0 }

概要

「中央配置」「背景固定」のレイアウトサンプル。

製作手順

（1）ドキュメントタイプの設定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">を使用。

GoliveCSでは、新規書類には<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Traditional//EN">が自動的に書き込まれる（古い（HTML3.2の）デザイン用のタグなどが使え、表現の揺らぎを許容する設定）が、スタイルシートを使ったページを作る際、これが仇となって文法通りに表示できなかったりするため使わない。

（2）スタイルシートの基本的な設定

ブラウザごとの表示の曖昧さをなくすために、マージンとパディング、インデントの設定を初期化する。そのために、CSSエディタで以下のエレメントスタイルを順に設定。

【*】全称セレクタ：「マージン」「パディング」を全て「0」に
【body】：「マージン」「パディング」を全て「0」に。文字色は、テキストのスタイルシートと干渉する可能性があるなら「無し」に。

（3）メイン（コンテンツ部分）の作成

ツールパレットからレイアウトエディタ（編集画面）に、レイヤーのアイコンをドロップします。これにより、htmlファイルのヘッダ内にIDスタイルが記述され、そのID要素を持つdivブロック要素がボディ内に書き込まれて、レイヤーが作られる。

レイヤーの名前を分かりやすく変更するため、レイアウトエディタ上で対象のレイヤーを選択し、レイヤーパレットから名称を変更する（名前を変更しておかないと、後でレイヤーを追加したときにIDが重複したりしてエラーの原因になる。ソースやCSSエディタから修正することも出来るが、レイアウトエディタで編集すれば、CSS部分とbody部分を一度に変更できるので楽）。

次にCSSエディタから、そのdiv要素のサイズや色、位置の指定を行う（「インスペクタ」ウインドウは全ての情報が表示されないので使いません）。

サイズはブロックプロパティから指定します。横幅は固定（px）または相対（%）などで指定し、縦は成り行きで良いなら「変更無し（未入力）」にします。

位置はブロックプロパティの「位置」で設定しますが、スクロールさせるならば「変更無し（未入力）」にしておきます。座標は何も入力しなければ、左上寄せになります。このサンプルのようにウインドウに対して真ん中に寄せたい場合は、「マージンとプロパティ」から、マージンの「左」「右」とも「自動（auto）」にします。上下は「0」もしくは「変更なし」にします。（パディングはいつも通りすべて「0」です）。

色は「背景プロパティ」から設定します。

※上記で作ったレイヤーをセンタリングするために、GoLiveではレイアウトエディタ上でメインメニュー（またはツールパレット）から「文字／配置／中央揃え」してもよいが、レイヤー内のテキストや画像などのオブジェクトにもセンタリングが影響するため、オススメできない。またIE（Win）では、divブロックを【body】のテキストの整列で中央にそろえる事ができるがバグらしい。

※GoLiveCSのレイアウトエディタ（編集画面）上では、上記の横位置の設定を行っても左揃えで表示される。

（４）背景

背景となる画像の配置はCSSエディタの背景プロパティで行う。

「画像」部分に画像ファイルのURLを指定。画像を固定したいのであればアタッチは「固定」にし、繰り返しは「1回のみ」にする。位置をセンタリングするならば横は「中央（center）」にする。縦は上端に揃えたければ「なし」もしくは「0px」に。