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

ダークテーマパンくず

暗い背景に白文字で表示するパンくずリストです。ダークデザインのコーポレートサイトやポートフォリオに向きます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-11-crumb" aria-label="breadcrumb">
          <span class="d03-05-11-item">ホーム</span>
          <span class="d03-05-11-sep">/</span>
          <span class="d03-05-11-item">導入事例</span>
          <span class="d03-05-11-sep">/</span>
          <span class="d03-05-11-item d03-05-11-current">詳細</span>
        </nav>

CSS

.d03-05-11{background:#1a1d23;padding:0;}
        .d03-05-11-crumb{width:100%;display:flex;flex-wrap:wrap;align-items:center;font-size:14px;font-family:sans-serif;color:#9aa0ab;gap:6px;padding:14px 20px;box-sizing:border-box;}
        .d03-05-11-item{color:#9aa0ab}
        .d03-05-11-sep{color:#4a4f59}
        .d03-05-11-current{color:#fff;font-weight:600}

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