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

ドット区切りパンくず

「・」の中黒で階層を区切るミニマルな形。文字数を抑えたいシンプルなお知らせページなどに使えます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-05-crumb" aria-label="breadcrumb">
          <span class="d03-05-05-item">ホーム</span>
          <span class="d03-05-05-sep">・</span>
          <span class="d03-05-05-item">お知らせ</span>
          <span class="d03-05-05-sep">・</span>
          <span class="d03-05-05-item d03-05-05-current">詳細</span>
        </nav>

CSS

.d03-05-05-crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;font-family:sans-serif;color:#666;gap:6px;letter-spacing:.02em}
        .d03-05-05-item{color:#666}
        .d03-05-05-sep{color:#aaa}
        .d03-05-05-current{color:#111;font-weight:600}

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