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

ピル型ナビ

各メニュー項目が丸いピル形状の背景を持つ静止したナビゲーションです。現在地の項目だけ塗りつぶし色で強調する構成にWordPressのメニューでよく使われます。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d03-03-02-nav{
          display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
          background:#f1f5f9;border-radius:999px;padding:6px;
        }
        .d03-03-02-nav a{
          color:#475569;
          text-decoration:none;
          font-size:13px;
          font-weight:600;
          padding:9px 18px;
          border-radius:999px;
        }
        .d03-03-02-nav a.active{
          background:#2563eb;
          color:#fff;
          box-shadow:0 2px 8px rgba(37,99,235,.35);
        }

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