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

カード型パンくず(枠線区切り)

各階層を縦罫線で仕切りカード風にまとめた形。事例紹介やコラムページのタイトル上に配置しやすい構成です。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d03-05-09-crumb{display:flex;flex-wrap:wrap;align-items:center;font-family:sans-serif;font-size:13px;border:1px solid #e2e4e8;border-radius:6px;overflow:hidden}
        .d03-05-09-item{padding:8px 14px;color:#666;border-right:1px solid #e2e4e8}
        .d03-05-09-item:last-child{border-right:none}
        .d03-05-09-current{color:#222;font-weight:600;background:#f7f8fa}

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