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

アイコン+テキスト併記ナビ

各メニュー項目に小さいインラインSVGアイコンを添えた静止ナビゲーションです。文字だけより意味を直感的に伝えやすくWordPressのフッターナビにも転用できます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-03-07-nav">
          <a href="#" onclick="return false">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l8-8 8 8M6 10v10h12V10"/></svg>
            <span>ホーム</span>
          </a>
          <a href="#" onclick="return false">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 9h16"/></svg>
            <span>サービス</span>
          </a>
          <a href="#" onclick="return false">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10l8-6 8 6v10"/><path d="M9 20v-6h6v6"/></svg>
            <span>実績</span>
          </a>
          <a href="#" onclick="return false">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>
            <span>会社概要</span>
          </a>
        </nav>

CSS

.d03-03-07-nav{
          display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
        }
        .d03-03-07-nav a{
          display:flex;flex-direction:column;align-items:center;gap:6px;
          color:#334155;
          text-decoration:none;
          font-size:11px;
          font-weight:600;
        }
        .d03-03-07-nav svg{color:#2563eb;flex:none}

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