横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法
-
-
-
はてな -
-
近年のホームページには必ずと言っていいほど横並びのメニューが実装されています。グローバルナビゲーションや、フッター部分のメニューなどでよく見られます。
そしてこういった横並びのメニューは下記のように、より見やすくするために項目をボーダーで区切っていることがよくあります。
横並びメニューの例１
横並びメニューの例２
例１のように全ての項目の両側にボーダーがある場合、まずリストの<li>の両側にボーダーを指定します。
ただしこのままだと、ボーダー同士が重なってしまい、その部分が太く実装されてしまいます。
ここで隣接セレクタの出番です。<li>の次に来る<li>に対して、「border-right」を指定します。
「html」
<body>
<ul class"sample1">
<li>ホーム</li>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</body>
「CSS」
li {
border-left: 1px solid #333;
border-right: 1px solid #333;
}
li+ li {
border-left: 0;
border-right: 1px solid #333;
}
こうすることで、最初の<li>には両側のボーダー、次に来る<li>には右側のボーダーを指定することが出来るので、重なる部分はなくなります。
◆例２の横並びメニューを実装する場合
例２
例２はそれぞれの項目の間にだけボーダーがある横並びメニューです。この場合、<li>の右側にボーダーを指定してしまいがちですが、そうすると右端に余分なボーダーが表示されてしまいます。
そこで隣接セレクタを使い、この余分なボーダーが出来ないように実装していきます。まず<li>にはボーダーを指定しないでおき、<li>の次に来る<li>に対してだけ、「border-left」を指定します。
「html」
<body>
<ul class"sample2">
<li>ホーム</li>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</body>
「CSS」
li+ li {
border-left: 1px solid #333;
}
こうすることで上記のように、余計なボーダーが表示されることなく綺麗に実装することが出来ます。
最後に
隣接セレクタは今回紹介した横並びのメニューに限らず、フロートした要素を規則的に並べる際のマージンの指定や、ある要素の直下にだけスタイルを指定したいときに有効です。また、隣接セレクタはIE7以降であれば対応しているので、クロスブラウザを意識したコーディングにも繋がります。
これまで使用したことがなかった方は、是非この隣接セレクタを活用してみてください。
-
-
-
はてな -
-