<body>とベースボックスの定義が終わったら、
今度は、ヘッダーボックスを定義して、ベースボックスにネストしていきます。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■ヘッダーボックスの定義内容
.header{
height: 224px;
padding :23px 0 0 0;
background: url("背景画像までのパス");
}
まず、
height属性をつかって、ヘッダーボックスの縦幅を定義してあげましょう。
基準となるのは、背景画像のタテのサイズ。
これが、247pxとなっているので、このボックスの縦幅は、
height: 247px
と、普通ならなりますが、今回は
padding属性で上の余白を定義するので、
height: 224px;
となります。
それから、背景画像は、下の画像をダウンロードしてから、定義してあげてください。
今回は、めんどいので、背景の繰り返し無効の定義はしません。
↓背景画像
ヘッダーボックスの背景画像
背景画像を定義した、ヘッダーボックスの中に、
タイトルロゴの画像を入れてやります。
↓タイトルロゴ
このロゴは、
SONOKI-Mさんが配布されているフリーフォントを利用させてもらい作りました。
■HTMLソース（<body>〜</body>）
<body>
<div class="base">
<div class="header">
<img src="タイトルロゴの画像までのパス">
</div>
</div>
</body>
これで、ヘッダーボックスの定義は完了です。
次は、、、、、センターボックス→レフトボックス→フッターボックスの順に定義していきます。
今までは、レフトボックスを先に定義して、HTMLに組み込んでましたが、
今回はレフトとセンターの順番を逆転させます。
そのために、ちょっと定義内容を変更しないといけないので、
ゆっくり理解していってくださいね。
