【CSS】横並びメニューの区切り線を隣接セレクタと疑似要素で実装する方法

グローバルメニューやフッタメニューで利用することが多い区切り線（罫線）。皆さんはどのように実装していますか？

区切り線を作る方法はいくつかありますが、CSSのborderプロパティを使えば手軽に作成できます。ですが、縦線の長さや位置を思い通りに調整するのは意外と難しいんですよね。特に、横並びのメニューなどで、線の位置を中央に配置したい場合や、線の高さを微調整したい場合は、borderでは限界があることが多いです。

そんな時に便利なのが、「隣接セレクタ」と「疑似要素」を使った実装方法です。この方法を使うと、より柔軟にデザインができ、簡単に見た目を調整できるので、スマートにメニューの区切り線を実装することができます。

横並びメニューの区切り線をCSSで実装

今回は、隣接セレクタと疑似要素を使って横並びメニューの区切り線を作成します。

隣接セレクタとは、特定の要素が他の要素に直接隣接している場合に適用されるセレクタです。例えば、今回のようにli要素が隣り合っている場合、その間に区切り線を表示させることが可能になります。さらに、beforeやafterといった疑似要素を組み合わせることで、要素の前や後ろに自由にコンテンツ（今回は区切り線）を挿入することができます。

以下は具体的な実装例です。

<ul class="navbar-nav">
    <li><a href="index.html">ホーム</a></li>
    <li><a href="company.html">会社情報</a></li>
    <li><a href="products.html">製品情報</a></li>
    <li><a href="recruit.html">採用情報</a></li>
    <li><a href="contact.html">問い合わせ</a></li>
</ul>

このように、リスト項目の間に区切り線を入れたい場合、CSSで隣接セレクタを使ってデザインを行います。

.navbar-nav {
    display: flex;
    list-style: none;
    position: relative;
}
.navbar-nav li+li:before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    height: 14px;
    margin-top: -7px;
    border-right: 1px solid #585858;
}
.navbar-nav a {
    padding: 10px;
}

解説：隣接セレクタと疑似要素を使った区切り線

区切り線の実装において、隣接セレクタと疑似要素の使い方がポイントです。具体的な実装ポイントを詳しく見ていきましょう。

隣接セレクタ (li+li)

隣接セレクタli+liは、隣り合っているli要素にのみスタイルを適用するセレクタです。これにより、1番目のliの後に区切り線を入れ、全てのli要素間に同じ線を挿入できます。最初のliには区切り線が適用されず、2番目以降にのみ表示されるので、無駄な線が入ることがありません。

疑似要素 (before)

li+li:beforeでは、区切り線を疑似要素としてli要素の前に挿入しています。content: “”で疑似要素にコンテンツを設定し、区切り線として機能するためのスタイルを適用します。

位置の調整 (position: absolute)

区切り線の位置をposition: absolute;で絶対配置し、top: 50%;で垂直方向に中央揃えにしています。さらに、margin-top: -7px;とすることで、区切り線の高さの半分だけ上方向にずらし、要素の中央にぴったり合わせています。これにより、どんな高さの要素であっても、区切り線が要素の中央に配置されるようになります。

デザインの柔軟性

この方法を使うと、borderプロパティのように制約されず、自由に線の位置やデザインを調整できます。たとえば、線の色やスタイルを変更することも簡単ですし、線の長さを変えたい場合もheightで調整するだけです。レスポンシブ対応も比較的容易で、要素のサイズが変わっても中央揃えが崩れないため、柔軟性があります。

他の活用方法：メニュー以外の区切り線

この実装方法は、横並びメニューだけでなく、他の場面でも応用が可能です。

カードデザインの仕切り線

コンテンツカードや項目間に区切り線を挿入する際も、隣接セレクタと疑似要素を使うと同様に簡単に実装できます。例えば、複数のブログ記事のプレビューが並んでいる場合、その間に細い縦線を入れて、すっきりとしたデザインを実現できます。

リストアイテムのスタイル

箇条書きリストやフッターメニューでも、区切り線を入れることで見やすく整理されたレイアウトが作れます。特に、縦に長いリストの場合、行間に少し空間を作り、視覚的に区切ることで、ユーザーの視線誘導を効果的に行うことができます。

CSSの基本的なプロパティであるborderは、シンプルで使いやすい反面、複雑なレイアウトやデザインには向かない場合もあります。そんな時には、隣接セレクタと疑似要素をうまく活用することで、簡単かつ柔軟に区切り線をデザインできるので、ぜひ試してみてください。多様なシーンで使える便利なテクニックですので、今後の実装に役立ててみてくださいね。