ステップ5(3)〜メニュー部分の作成3〜

CSSテクニックで紹介しているテクニックを導入して見栄えをアップさせます。 詳しい解説はそっちを見てください。

リストのマーカーを画像にする

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

#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;
}

テクニックの詳しい解説は リストのマーカーに画像を使う、 に譲ります。

#beginerなどではなく、#contentに指定したのがポイントと言えばポイントです。 前のページでやったような指定もできるのですが、こっちのほうが文字数が少なくて済みます。 #ID ulのような書き方はulタグがIDの直下になくても適用されます。 今回の場合#contentを#mainと書き換えてもなんら問題はありません。

見出しをずらして重ねる

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

#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;
}

テクニックの詳しい解説は −マージンを使って重ねる、 に譲ります。

−マージンを使って重ねるという方法はテーブルデザインなどでは難しく、 スタイルシートならではのテクニックといえます。
CSSテクニック では他にも様々なテクニックが紹介されています。いろいろ試してみてください。

ポイント

ここでのポイントは、

1. 細かい装飾は後回し

の１つです。

今回のような仕上げの装飾は最後にやりましょう。 レイアウトより先にやってしまうと、 レイアウトが上手くいかないとき原因を見つけるのが大変になります。

確認

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

ステップ５(3)終了時点

著作権部分を追加したら完成です！