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