初心者の館

ステップ7〜ボックスごとに背景をつける〜

これで完成になります。
最後はIDをつかってボックスごとに背景をつけていきます。


スタイルシートを書く

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

#head{
    background-color:#7F2D00;
}
#news{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;/*枠線の色*/
    border-width:0px;/*枠線の太さ*/
    border-left-width:10px;/*枠線左側の太さ*/
    border-style:solid;/*枠線の見た目*/
}
#beginer{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;
    border-width:0px;
    border-right-width:10px;
    border-style:solid;
}
#design{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;
    border-width:0px;
    border-left-width:10px;
    border-style:solid;
}
#css{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;
    border-width:0px;
    border-right-width:10px;
    border-style:solid;
}

ポイント

ここでのポイントは、

  1. IDの使い方
  2. borderに関するプロパティ
  3. border-widthの順番

の3つです。
セレクタとしてIDを使うときは名前の前に#をつけます。
borderは結構使えるので早めにプロパティを覚えてしまいましょう。
border-width:0px;をborder-right-width:10px;の後に書くと枠線が表示されません。
気をつけてください。

確認

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

ステップ7終了時点

これで完成です。お疲れ様でした。
あとは自分の好きなようにいじって練習してみてください。


←前のステップへBACK : あとがき


一覧へ戻る


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