【CSS】メニューナビのそれぞれの項目の左右に罫線を付ける方法
今回はメニューナビの各々の両端に対して、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等を活用する方法等を使って実現可能です。
一例としてご参考頂ければと思います。
ディスカッション
コメント一覧
まだ、コメントがありません