Facebook Twitter RSS
横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法

横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法

facebook twitter hatena Pocket

adjacent-sibling-combinator

近年のホームページには必ずと言っていいほど横並びのメニューが実装されています。グローバルナビゲーションや、フッター部分のメニューなどでよく見られます。

そしてこういった横並びのメニューは下記のように、より見やすくするために項目をボーダーで区切っていることがよくあります。

横並びメニューの例1

横並びメニューのサンプル1

横並びメニューの例2

横並びメニューのサンプル2

このような項目間のボーダーを実装するためにはいくつかの方法がありますが、今回はその中でも簡単で余計なクラスを増やす必要がない「隣接セレクタ」を使った方法を紹介します。

そもそも隣接セレクタとは?

隣接セレクタはCSSにおけるセレクタの1つで、ある要素の「次に来る要素」を対象としています。

具体的に説明すると、以下のように要素が並んでいたとして、

<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」に対してだけ、任意のスタイルを適応出来ます。

◆例1の横並びメニューを実装する場合

では早速、この隣接セレクタを使って横並びのメニューにボーダーを実装していきます。

例1

横並びメニューのサンプル1

例1のように全ての項目の両側にボーダーがある場合、まずリストの<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>には右側のボーダーを指定することが出来るので、重なる部分はなくなります。

◆例2の横並びメニューを実装する場合

例2

横並びメニューのサンプル2

例2はそれぞれの項目の間にだけボーダーがある横並びメニューです。この場合、<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以降であれば対応しているので、クロスブラウザを意識したコーディングにも繋がります。

これまで使用したことがなかった方は、是非この隣接セレクタを活用してみてください。

facebook twitter hatena Pocket
前のページ
次のページ
ページトップ