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

これで完成になります。
最後は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の順番

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

確認

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

ステップ７終了時点

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