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

 

完成イメージ

f:id:brriant:20150808225009j:plain
[quads id=”1″]

ソース

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

これで完成！
これから使いたい方は、試してみてください。