横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法
近年のホームページには必ずと言っていいほど横並びのメニューが実装されています。グローバルナビゲーションや、フッター部分のメニューなどでよく見られます。
そしてこういった横並びのメニューは下記のように、より見やすくするために項目をボーダーで区切っていることがよくあります。
横並びメニューの例１
横並びメニューの例２
このような項目間のボーダーを実装するためにはいくつかの方法がありますが、今回はその中でも簡単で余計なクラスを増やす必要がない「隣接セレクタ」を使った方法を紹介します。
そもそも隣接セレクタとは？
隣接セレクタはCSSにおけるセレクタの１つで、ある要素の「次に来る要素」を対象としています。
具体的に説明すると、以下のように要素が並んでいたとして、
<body> <div id="example"> <div class="aaa">要素A</div> <div class="bbb">要素B</div> <div class="bbb">要素B</div> </div> </body>
隣接セレクタを使うと、要素Aの後に来る要素Bに対してだけ、任意のスタイルを適応することが出来ます。
<body> <div id="example"> <div class="aaa">要素A</div> <div class="bbb">要素B</div><!-- ←スタイルが適応される！ --> <div class="bbb">要素B</div><!-- ←スタイルが適応されない --> </div> </body>
※親要素が同じでないと指定することは出来ません。
スタイルシートにおける書き方としては、要素と要素を「+」で繋ぎ、
.要素A+ .要素B {…}
このように書きます。これで上記で説明した要素Aの後に来る「要素B」に対してだけ、任意のスタイルを適応出来ます。
◆例１の横並びメニューを実装する場合
では早速、この隣接セレクタを使って横並びのメニューにボーダーを実装していきます。
例１
例１のように全ての項目の両側にボーダーがある場合、まずリストの<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以降であれば対応しているので、クロスブラウザを意識したコーディングにも繋がります。
これまで使用したことがなかった方は、是非この隣接セレクタを活用してみてください。
