メニューリストを横並びさせてボーダーで区切る

リスト要素をfloatで横並びにした際、「｜」などで区切るケースも多いと思います。ただし、テキストで｜を入れてしまうと、装飾のための文字としての扱いのため、なんとなく気持ち悪い感じ。こんな時はborderプロパティを使用し実現します。

実現したいレイアウト

今回のポイントとしては、ホームの左側にはボーダーを表示させたくない。２種類のテクニックを紹介します。

Case1

liに左ボーダーを指定して、さらにulの左にネガティブマージン指定。そしてはみ出す部分をdivのoverflowで隠す。

ulをdivで囲み、divにoverflow:hiddenを指定。ulをborder+padding分marginで左にマイナスする。結果、一番左のボーダーは見切れ状態にしてはみ出す部分はoverflow:hiddenで隠します。

Case2

li全てにに左ボーダーを指定して、classを使っていちばん左のボーダーを消す。

とりあえずliは全部左のボーダーを付けます。最後にborderとpaddingが0のclassを作成し、一番左のliの線を打ち消します。

サンプルファイルをダウンロード

CSS

ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
margin: 0;
padding: 0;
}

#navi {
overflow: hidden;
_height: 1.5em; /*IE6*/
}
#navi ul {
margin-left: -6px;
}
#navi ul li {
display: inline;
border-left: 1px solid #999;
padding: 0 5px;
}

ul#list li {
display: inline;
border-left: 1px solid #999;
padding: 0 5px;
}
ul#list li.noborder {
border-left: none;
padding-left: 0;
}

HTML Case1

<div id="navi">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="index.html">サイトマップ</a></li>
<li><a href="index.html">お問い合わせ</a></li>
<li><a href="index.html">プライバシーポリシー</a></li>
</ul>
<!--//navi--></div>

HTML Case2

<ul id="list">
<li class="noborder"><a href="index.html">ホーム</a></li>
<li><a href="index.html">サイトマップ</a></li>
<li><a href="index.html">お問い合わせ</a></li>
<li><a href="index.html">プライバシーポリシー</a></li>
</ul>