パーツ番号 03-05-12 ・ CSSのみ

ステップ番号付きパンくず

各階層に丸背景の番号を振ったパンくずリストです。会員登録フォームのような段階的な手順の現在地表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-12-crumb" aria-label="breadcrumb">
          <span class="d03-05-12-item"><i>1</i>ホーム</span>
          <span class="d03-05-12-sep"></span>
          <span class="d03-05-12-item"><i>2</i>カテゴリ</span>
          <span class="d03-05-12-sep"></span>
          <span class="d03-05-12-item d03-05-12-current"><i>3</i>詳細ページ</span>
        </nav>

CSS

.d03-05-12-crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;font-family:sans-serif;color:#888;gap:8px}
        .d03-05-12-item{display:flex;align-items:center;gap:6px;color:#888}
        .d03-05-12-item i{font-style:normal;width:18px;height:18px;border-radius:50%;background:#e5e7eb;color:#888;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
        .d03-05-12-sep{width:16px;height:1px;background:#d1d5db}
        .d03-05-12-current{color:#222;font-weight:700}
        .d03-05-12-current i{background:#2563eb;color:#fff}

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