レイアウトの骨組みができたら、
今度は、各ボックスの細かい部分を定義していきます。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■センターボックスの定義内容
.center{
width: 479px;
float: right;
padding:0px 0px 10px 0px;
}
まずは、上のように、センターボックスの定義内容に、
padding属性の定義を付け加えてください。
そしたら、今度は、コンテンツの
見出し「h1」を定義します。
■見出し「h1」の定義内容
h1{
height: 26px;
padding:13px 0px 0px 35px;
background: url(背景画像までのパス);
background-repeat: no-repeat;
margin:0 0 5px 0;
font-size: 16px;
color: #FFFFFF;
}
まず、
height属性を使って、ボックスの
縦幅を、
26pxと定義。
次に、
padding属性で、ボックス内部の
余白を上のように定義します。
それから、以下の画像を、背景画像として定義します。
背景用の画像
それから、繰り返し阻止の、
background-repeat:no-repeat を定義。
そしてに、
margin属性で、このボックスの下にある要素との感覚を、
5pxあけるという定義を書き込みます。
<h1>を定義する時は、基本セレクタが、混乱しなくて便利ですね。
次に、フォントサイズ、テキストカラーを定義してあげます。
とりあえず、ここまでで、このページでのスタイルシートの定義作業は終了です。
下のように、HTMLソースに組み込んでいってくださいな。
■HTMLソースの記述内容
<body>
<div class="base">
<div class="header"><img src="img/title.gif" width="324" height="63"></div>
<div class="center">
<h1>Yahooの検索エンジンが...</h1>
テキストは長いので、省略ってことで。
</div>
<div class="left">
</div>
<div class="footer"></div>
</div>
</body>
ソースに新しく書き込む範囲は、上の赤いテキスト部分ですね。
次は、レフトボックスを定義します。
メニュー作りをやっちゃいましょう。
