初心者の館

ステップ3〜装飾する〜

LV3のステップ5(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テクニックで解説しているのでそちらを見てください。

確認

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

ステップ3終了時点

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


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


一覧へ戻る


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