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

モノクロラインアイコンのミニマルナビ

細い線画アイコンのみをグレースケールで淡く並べた最小構成のナビゲーションです。装飾を抑えたいWordPressの管理ツール系サイトに向いています。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-10-nav">
          <a href="#" onclick="return false" class="active" aria-label="ホーム">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5"><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="1.5"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/></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="1.5"><path d="M3 6h6l2 3h10v10H3z"/></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="1.5"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></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="1.5"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></svg>
          </a>
        </nav>

CSS

.d03-13-10-nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
        .d03-13-10-nav a{
          display:flex;align-items:center;justify-content:center;
          color:#94a3b8;text-decoration:none;
        }
        .d03-13-10-nav a.active{color:#1e293b}

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