では、まず初めに、
<body>とベースボックスのスタイルシートを定義して、
HTMLファイルに適用させていきましょう。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■<body>の定義内容
body{
line-height: 140%;
font-size: 12px;
color: #FFFFFF;
margin: 20px 0px 10px 0px;
background-color: #000000;
}
<body>は一般的にタグと呼ばれる要素なので、定義するときは、
基本セレクタで。
今回の定義内容で、特に注意してもらいたいのが、marginの定義内容です。
margin:20px 0px 10px 0px
見てわかるとおり、今回は、上下のスペースをマージンで定義しています。
ちなみに定義方法は、
margin:20px 0 10px 0
というように、「
0px」の「
px」を省略してもＯＫです。
つぎは、ベースボックスの定義です。
このボックスの中に、<DIV>ボックスをネストしていくことで、
WEBサイトのレイアウトを、つくっていきます。
■ベースボックスの定義
.base{
width: 698px;
margin:0px auto 0px auto;
}
横幅は698px。
ここでの注意点は、やっぱりmarginの定義ですね。
margin: 0px auto 0px auto
とすることで、WEBページを、ウィンドウ幅にあわせて中央に表示することができます。
そして、今回は、このベースボックスに背景画像は定義しません。
全体的に繰り返すデザインじゃないですので。
■HTMLソース（<body>〜</body>）
<body>
<div class="base"><body>とベースボックスを定義して、適用させています。真っ黒でわからないけども。</div>
</body>
これで、<body>とベースボックスの定義はおわりです。
次はヘッダーボックスの定義をしてみましょう。
