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

現在地強調パンくず

末尾の現在地だけ太字と色付きで目立たせる形。ユーザーが今どのページにいるか一目で把握しやすくなります。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-06-crumb" aria-label="breadcrumb">
          <span class="d03-05-06-item">ホーム</span>
          <span class="d03-05-06-sep">/</span>
          <span class="d03-05-06-item">サポート</span>
          <span class="d03-05-06-sep">/</span>
          <span class="d03-05-06-item d03-05-06-current">よくある質問</span>
        </nav>

CSS

.d03-05-06-crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;font-family:sans-serif;color:#999;gap:6px}
        .d03-05-06-item{color:#999;font-weight:400}
        .d03-05-06-sep{color:#ccc}
        .d03-05-06-current{color:#d9534f;font-weight:700;font-size:15px}

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