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

左端固定アイコンレール

画面左端に縦一列でアイコンだけを並べたダッシュボード風の静止ナビです。管理画面テンプレートのサイドバーとしてWordPressの会員サイトなどに転用できます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-01-rail">
          <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="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"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></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="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0112 5a5.5 5.5 0 019.5 7c-2.5 4.5-9.5 9-9.5 9z"/></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"><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

.prev.d03-13-01{padding:0;display:block}
        .d03-13-01-rail{
          position:absolute;left:0;top:0;bottom:0;width:64px;
          display:flex;flex-direction:column;align-items:center;gap:22px;
          padding:24px 0;background:#0f172a;
        }
        .d03-13-01-rail a{
          display:flex;align-items:center;justify-content:center;
          width:38px;height:38px;border-radius:10px;
          color:#94a3b8;text-decoration:none;
        }
        .d03-13-01-rail a.active{
          background:#2563eb;color:#fff;
        }

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