ステップ３〜装飾する〜

LV3のステップ５(3)と同じなので一気に行きます。

CSSを書く

次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）

#content h2{
    position:relative;
    border:solid 2px #663300;
    width:150px;
    background-image:url(../../img/head-menu-back.gif);
    text-align:center;
    font-size:large;
    margin:-15px 0px 10px -30px;
    padding:0.3em 0em;
}
#content p{
    margin:0.3em 1em;
}
#content ul{
    position:relative;
    width:95%;
    padding:5px;
    border-top:#7F2D00 1px solid;
    list-style:none;
    margin:0px;
    line-height:1.2em;
}
#content li{
    list-style:none;
    background:url('../../img/point-s.gif') no-repeat center left;
    padding-left:20px;
}

ポイント

ここでのポイントは、

1. #ID ulというID＋セレクタを利用したCSSの書き方を覚える

の1つです。

テクニックに関してはCSSテクニックで解説しているのでそちらを見てください。

確認

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

ステップ３終了時点

分かりやすいようにボーダープロパティを設定しています。
次は著作権を書き込みます。