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

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

こんにちは。

ゆうや(@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で横並びメニューに区切り線を入れる方法をご紹介しました。

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

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

あわせて読みたい

【CSSコピペ】2列のひょうを作る方法

CSSだけで細い矢印を作る方法【下向き矢印・右向き矢印】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です