CSSで横並びメニューに区切り線を入れる方法

2020/02/08

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSで横並びメニューに区切り線を入れる方法を紹介します。

もう少し具体的に言うと、liタグで作った横並びメニューに等間隔で「/」を入れる方法です(^o^)

疑似要素を使って簡単実装できます。

それでは作り方を見て参りましょう！

CSSで横並びメニューに区切り線を入れてみよう！
まとめ

CSSで横並びメニューに区切り線を入れてみよう！

完成イメージ

実装のポイント

今回の実装のポイントは、

ulタグにdisplay:flexを指定して横並びメニューにする
liタグにposition:relativeを指定する
liタグの子要素のaタグに左右のpaddingを指定する
liタグの疑似要素で区切り線「/」を上下中央揃えで配置する

となります。

コードを見ながら確認していきましょう。

HTML

index.html

<ul class="List">
  <li class="List-Item"><a href="#" class="List-Item-Link">SERVICE</a></li>
  <li class="List-Item"><a href="#" class="List-Item-Link">ABOUT</a></li>
  <li class="List-Item"><a href="#" class="List-Item-Link">COMPANY</a></li>
  <li class="List-Item"><a href="#" class="List-Item-Link">CONTACT</a></li>
</ul>

CSS

index.css

.List {
  display: flex;
}
.List-Item {
  position: relative;
  color: #5bc8ac;
  font-size: 18px;
  list-style: none;
}
.List-Item:before {
  position: absolute;
  top: 50%;
  content: "/";
  display: block;
  transform: translate(-50%, -50%);
  color: #5bc8ac;
}
.List-Item-Link {
  padding-left: 24px;
  padding-right: 24px;
  text-decoration: none;
  color: inherit;
}

区切り線入り横並びメニューサンプルコード

See the Pen
ZEGYLoR by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

以下の記事からヒントを得ました！

この記事では、「/」ではなく、疑似要素のborder-rightで「|」を区切り線として実装しています。

参考【CSS】横並びメニューの区切り線を「隣接セレクタ」と「疑似要素」を使って実装する方法WeberNote

まとめ

以上、CSSで横並びメニューに区切り線を入れる方法をご紹介しました。

ヘッダーやフッターで使用する機会があればぜひ試してみてください。

最後までご高覧いただきありがとうございました！