近年のホームページには必ずと言っていいほど横並びのメニューが実装されています。グローバルナビゲーションや、フッター部分のメニューなどでよく見られます。 そしてこういった横並びのメニューは下記のように、より見やすくするために項目をボーダーで区切っていることがよくあります。 横並びメニューの例1 横並びメニューの例2 このような項目間のボーダーを実装するためにはいくつかの方法がありますが、今回はその中でも簡単で余計なクラスを増やす必要がない「隣接セレクタ」を使った方法を紹介します。 そもそも隣接セレクタとは? 隣接セレクタはCSSにおけるセレクタの1つで、ある要素の「次に来る要素」を対象としています。 具体的に説明すると、以下のように要素が並んでいたとして、 <body> <div id="example"> <div class="aaa">要素A</div> <div class="bbb
![横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法 | 株式会社WEB企画](https://cdn-ak-scissors.b.st-hatena.com/image/square/049c3327c7e42938c7f18b4f3c856054deebe028/height=288;version=1;width=512/https%3A%2F%2Fwebkikaku.co.jp%2Fhomepage%2Fwp-content%2Fuploads%2F2014%2F07%2Fadjacent-sibling-combinator.jpg)