CSSで横並びメニューの間にのみ、区切り線を入れる。

f:id:brriant:20150808223040j:plain
ホームページを作っていると、横並びメニューを作りたくなることって多いですよね。皆さん、CSSを利用されていると思うのですが、このメニューの間に項目を切るためのボーダー線を入れたいこと、ありませんか？そういう時に役に立つTipsです。

完成イメージ

f:id:brriant:20150808225009j:plain

ソース

<div class="cate_navi">
<ul>
<li><a href="./">日記</a></li>
<li><a href="./">ライフハック</a></li>
<li><a href="./">HTML/CSS</a></li>
<li><a href="./">Photoshop</a></li>
<li><a href="./">Illustrator</a></li>
<li><a href="./">Wordpress</a></li>
<li><a href="./">TIPS</a></li>
<li><a href="./">ウェブデザイン</a></li>
</ul>
</div>

CSS

.cate_navi ul{
    list-style-type: none;　/* 丸いマークを消しています。 */
    margin: 0px auto 0;　　
    text-align:center;
}

.cate_navi li{
    float:left;　　　　　　　/* 横並びにしています。 */
    padding: 0 10px 0 10px;
}
.cate_navi li +li{
    border-left: 1px solid #333;　　/* ここがボーダー線指定しているところ */
    padding: 0 10px 0 10px;　　　　 /* メニューとボーダー線の間の距離感 */
}

これで、できます♪
はじめて、はてな記法を使ってみた。うん、いい感じ。

実はこれ、隣接セレクタを利用した方法

隣接セレクタは、使われている要素の「次に来る要素」を対象として、指定するもの。スタイルシートで要素と要素を「+」で繋ぎ、{}で書いた場所の内容が適応される。上の記述だと

 li +li{　}

の部分になります。
ただし、※親要素が同じなことが条件とのこと。・・そりゃそうだ。

んとっ、そのメニューの両サイドに区切り線を出したいんだけど？
そういう場合はこちら。

.cate_navi ul{
    list-style-type: none;
    margin: 20px auto 0;
    text-align:center;
}

.cate_navi li{
    float:left;
    padding: 0 10px 0 10px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}

.cate_navi li + li{
    border-left: 0;
    border-right: 1px solid #333;
}