ulタグでメニューを作る2

ulタグをふつーに使うと、縦方向に伸びていきますが、これを横に詰めて表示させ、 横並びのメニューを作るというテクニックです。

テクニック使用前

• トップ
• インフォメーション
• BBS
• リンク集

テクニック使用後

• トップ
• インフォメーション
• BBS
• リンク集

やり方

HTMLはこんな感じになります。

<ul class="sample">
<li><A href="#">トップ</A></li>
<li><A href="#">インフォメーション</A></li>
<li><A href="#">BBS</A></li>
<li><A href="#">リンク集</A></li>
</ul>

スタイルシートはこんな感じになります。

ul.sample{
    list-style:none;
    width:100%;
    font-size:14px;
    margin-left:0px;
    padding:3px 0px;
    border-top:double 4px #663300;
    border-bottom:double 4px #663300;
    text-align:center;
    background-color:#ffffff;
}
ul.sample li{
    list-style:none;
    display:inline;
    background-color:#ffffff;
    margin:0px 15px;
}
ul.sample a{
    padding-left:15px;
    text-decoration:none;
}
ul.sample a:hover{
    background:url(../../csstec/img/tri-b.gif) left center no-repeat;
}

今回のポイントはul.sample liに設定したdisplay:inline;です。
極端な話、これさえ設定すれば、横に並べることができます。 ほかのプロパティは全て装飾に使っています。

display:inline;を使っているため、liにmarginを指定しても、左右は効きますが、 上下は無効になります。 そのため、上下に余白を作るにはulタグにpaddingを指定する必要があります。
ここがちょっと難しいかもしれません。

あと、liにheightやwidthを指定するのは禁止です。ルールだからです。 そのためliの幅は文字数に依存するので、liにborder-leftを指定したり、 aに背景色を指定してロールオーバー効果を出すとバランスが悪くなります。

演出に凝るなら、サンプルのようにワンポイントの背景画像を使うのが良いでしょう。

---

使いこなすための＋α

ulタグでメニュー１ではfloat:left、ulタグでメニュー２ではdisplay:inlineを使用して並べていますが、 使い分けるポイントはどこにあるのでしょうか？

floatならwidthを指定できるので、ボタンのような演出をするときに向いています。 また、display:inlineでやれることは全てできます。 しかしfloatの特性があるので、若干取り扱いが難しいです。

display:inlineの場合は取り扱いが簡単です。下にどのような要素を持ってきてもレイアウトが変になることはまずありません。 今回のサンプルのようにバー状にしたり、文字数の差が大きく特にwidthを指定する必要が無いときはこちらがおすすめです。

widthが必要ならfloat、とくに必要ないのならdisplayという感じで使い分けるといいと思います。

---