２．ヘッダーボックスをつくりましょう

前のページが基礎工事だとすると、
こっからは、いよいよ家をたてるための、骨組みやら、
内装工事という感じです。

でも、このページは、なんというか、、、、表札づくり？のような。

このヘッダーボックスに、タイトルロゴと、コメントみたいな画像もいれて、
サイトの顔をつくります。

このページの文中のリンクは、すべて新しいウィンドウで開きます。

このページの完成サンプルはこちら >>

■ヘッダーボックスの定義内容

このボックスは、まず背景画像に合わせて、高さを定義します。
横幅は指定しません。なぜかというと、
このボックスは、ベースボックスにネストするので、自然と横幅は、
ベースボックスのものと同じ値になります。
↓背景画像
ヘッダーボックスの背景画像

この画像の縦幅が、130pxなので、ヘッダーボックスの縦幅も130pxになるわけです。
そして、この背景画像は、繰り返されると、デザインが台無しになりますから、
background-repeat: no-repeat

と定義して、繰り返しを阻止しています。（別に縦幅をピッタリつくってるので、指定しなくてもいいけど念のため）

つぎに、このヘッダーボックスの中に、
タイトルロゴと、コメント画像を入れてやります。

↓タイトルロゴ　　　　　　　　　　　　　　　　　　　　　　
　　
↓コメント


入れた時の、サンプルはこちら >>
■HTMLソース

サンプルを見てもらうとよくわかると思いますが、
デザイン崩れてますよね？
これは、タイトルロゴとコメント画像が、私がデザインした位置に配置されてないからです。

だから、これらを、ねらった位置に配置するために、
先ほど定義した、ヘッダーボックスに変更を加えます。


赤いテキスト部分が変更箇所。
タイトルロゴは、

上から43px、左から9pxの位置に配置するようにデザインしてある

ので、ヘッダーボックスに新しい属性paddingを加えて、
上からの幅43ｐｘ、左からの幅9pxと定義してあげます。


ここで、注目してほしいのが、縦幅を定義するためのheightの値。

変更前は、130pxだったのを覚えてますでしょうか？
変更後は87px。。。。この差は、43px。

パディングの上からの幅を引き算して、定義し直してるんです。

こういうふうに、引き算して定義しなおさないと、
全体の幅が173pxのボックスが出来上がって、レイアウトが崩れてしまいますので気をつけてくださいね。


これで、表札は完成です。

つぎは、メニューとかを置くのに便利な、左のお部屋、レフトボックスと、
ページのメインである、真ん中の部屋、センターボックスを定義します。

<DIV>を段組しちゃうので、不安なかたは、練習問題にもどってチェックしてください。