パーツ番号 03-03-03 ・ CSSのみ

ボーダー区切りナビ

メニュー項目の間に縦の細い罫線を挟んで区切る静止したナビゲーションです。文字数が多いメニューでも視覚的な境目が分かりやすくなります。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-03-03-nav">
          <a href="#" onclick="return false">ホーム</a>
          <span class="d03-03-03-sep"></span>
          <a href="#" onclick="return false">サービス</a>
          <span class="d03-03-03-sep"></span>
          <a href="#" onclick="return false">実績</a>
          <span class="d03-03-03-sep"></span>
          <a href="#" onclick="return false">会社概要</a>
        </nav>

CSS

.d03-03-03-nav{
          display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
        }
        .d03-03-03-nav a{
          color:#1f2937;
          text-decoration:none;
          font-size:13px;
          font-weight:600;
          padding:4px 0;
        }
        .d03-03-03-sep{
          width:1px;
          height:14px;
          background:#cbd5e1;
          flex:none;
        }

クラス名 .d03-03-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。