初心者の館

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

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


スタイルシートを書く

ではスタイルシートを書いてみましょう。
次のソースをコピーして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を設定する

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

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

確認

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

ステップ5終了時点

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

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


←前のステップへBACK : 次のステップへGO→


一覧へ戻る


Last Modified 2004-10-02 © きくちゃん 2004 - All Rights Reserved