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

パンくず風ステップナビの見た目

階層をたどるパンくずのようにステップ名を並べたナビです。ECサイトの購入フローや複数ページの申込みフォームの上部案内に使えます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d04-10-03-wrap">
          <span class="d04-10-03-crumb d04-10-03-done">お客様情報</span>
          <span class="d04-10-03-sep">&#8250;</span>
          <span class="d04-10-03-crumb d04-10-03-current">お支払い方法</span>
          <span class="d04-10-03-sep">&#8250;</span>
          <span class="d04-10-03-crumb">確認・完了</span>
        </nav>

CSS

.d04-10-03-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;max-width:300px;font-family:sans-serif}
        .d04-10-03-crumb{font-size:12.5px;color:#9ca3af;font-weight:600;padding:5px 10px;border-radius:99px;background:#f3f4f6}
        .d04-10-03-done{color:#4338ca;background:#eef2ff}
        .d04-10-03-current{color:#fff;background:#6366f1}
        .d04-10-03-sep{font-size:13px;color:#c7cbd3}

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