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

大きめタイポグラフィパンくず

文字サイズを大きくとり視認性を高めた形。読みやすさを重視したメディアサイトや特集ページに向きます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-10-crumb" aria-label="breadcrumb">
          <span class="d03-05-10-item">ホーム</span>
          <span class="d03-05-10-sep">/</span>
          <span class="d03-05-10-item">マガジン</span>
          <span class="d03-05-10-sep">/</span>
          <span class="d03-05-10-item d03-05-10-current">特集記事</span>
        </nav>

CSS

.d03-05-10-crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:18px;font-family:sans-serif;color:#555;gap:10px}
        .d03-05-10-item{color:#555}
        .d03-05-10-sep{color:#ccc;font-size:16px}
        .d03-05-10-current{color:#111;font-weight:700}

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