それでは、まず、WEBサイトレイアウトの基礎となる、
<body> と ベースボックスの定義
から始めます。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■<body>の定義内容
body{
line-height: 140%;
font-size: 12px;
color: #444444;
margin: 0px;
}
<body>は一般的にタグと呼ばれる要素なので、定義するときは、
基本セレクタで。
また、<body>には、デフォルトで、
間隔を空けるような設定がしてあるので、
margin: 0px と定義することで、その
間隔を消してあげます。
つぎは、ベースボックスの定義です。
このボックスの中に、<DIV>ボックスをネストしていくことで、
WEBサイトのレイアウトを、つくっていきます。
■ベースボックスの定義
.base{
width: 615px;
margin:0px auto 0px auto;
background: url(背景画像までのパス);
}
このWEBサイトは、横幅が615pxです。
ここで、注目してもらいたいのが、marginの定義内容。
margin: 0px auto 0px auto
となってますよね？
左右のマージンの値のところに、「
auto」という見慣れないものが入ってます。
これは、
ページをウィンドウ幅によって、中央に表示させるためにやってます。
「左右のマージンだけは、自動で調節しといてっ！」 みたいに、ブラウザにお願いしてる感じです。
セリフが、お願い口調じゃないですが．．．
そして、このベースボックスに、背景画像も定義します。
こういった、基礎となるボックスに、
繰り返して表示させたい背景画像を定義すると、
のちのち約にたってきます。
↓背景画像
ベースボックスの背景画像
■HTMLソース（<body>〜</body>）
<body>
<div class="base"></div>
</body>
これで、<body>とベースボックスの定義は終了です。
ベースボックスには縦幅を指定してませんが、
これも意味があるので、とりあえず進めてみてくださいね。
