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

丸背景付きアイコンボタン列

各アイコンに淡い円形の背景を敷いてボタンらしさを出した横並びナビの静止見本です。WordPressのツールバーやアクションバーに使いやすい構成です。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-04-nav">
          <a href="#" onclick="return false" aria-label="ホーム">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l8-8 8 8M6 10v10h12V10"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="カレンダー">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="メッセージ">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16v11H8l-4 4V5z"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="グラフ">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M12 20V4M20 20v-7"/></svg>
          </a>
        </nav>

CSS

.d03-13-04-nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
        .d03-13-04-nav a{
          display:flex;align-items:center;justify-content:center;
          width:44px;height:44px;border-radius:50%;
          background:#f1f5f9;color:#475569;text-decoration:none;
        }

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