ステップ５〜見出し部分の設定〜

ここでは見出し部分の設定をします。
すぐに終わってしまうので、できればコピーではなく、自分で書いてみましょう。

スタイルシートを書く

ではスタイルシートを書いてみましょう。
次のソースをコピーしてstyle.cssに貼り付けてください。

h1{
    background-image:url(./img/head-back.gif);/*背景画像*/
    font-size:medium;/*文字の大きさ：普通*/
    margin-top:0px;/*上方向の余白無し*/
}
h2{
    text-align:center;/*文字を中央に寄せる*/
    background-color:#663300;/*背景色：茶*/
    color:#FFFFFF;/*文字色：白*/
}

ポイント

ここでのポイントは、

1. h1に文字の大きさを設定する
2. h1にmargin-topを設定する

の２つです。
h1タグの文字の大きさは大きすぎる感じがしたので、小さくしました。
あと、ロゴとの隙間を無くしたかったので、margin-topを0pxにしました。

好みに合わせて文字色や背景色は変えてみてください

確認

できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。

ステップ５終了時点

ちょっとずつ完成形に近づいてきました。
もうちょっとがんばって見たい人は、classを作って見出しの色を変えてみましょう。
classの作り方と使い方は基礎知識編で紹介しています。

次は本文とリストの見栄えを設定します。