【CSS】メニューナビのそれぞれの項目の左右に罫線を付ける方法

2019年6月4日2019年6月5日

今回はメニューナビの各々の両端に対して、CSSを用いて罫線を付ける方法です。

装飾後は以下のようなイメージとなります。

それでは、早速見ていきましょう。

コード

まず、「ログイン」、「会員登録」、「メルマガ」の3つの要素をリスト形式でマークアップします。

<ul>
    <li>ログイン</li>
    <li>会員登録</li>
    <li>メルマガ</li>
</ul>

次に、CSSで装飾を行います。

ul li{
	display:inline-block;
	padding: 0px 2px;
    border-left:1px solid #000;
}
ul li:last-child{
	border-right:1px solid #000;
}

4行目はリストの各要素の左側に罫線を引いています。両端に罫線を引くと、隣り合う要素の罫線（1番目の要素の右側と2番目の要素の左側など）が被さって太く見えてしまうので、左側のみに罫線を引いています。

7~9行目は最後の要素に対して右側に罫線を引いています。

上記の記述を行うと、ナビの各項目の左右に罫線を引くことが出来ます。

また、3行目のpaddingプロパティの「2px」を調節することにより、文字と罫線の幅を調節できます。

以下は、padding:0px 20pxとしたときの状態です。

終わりに

今回ご紹介した方法以外にも、border:none等を活用する方法等を使って実現可能です。

一例としてご参考頂ければと思います。