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

シンプルスラッシュ区切りパンくず

「/」記号で階層を区切る最も基本的な形。企業サイトや商品ページの現在地表示に使える定番レイアウトです。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-01-crumb" aria-label="breadcrumb">
          <span class="d03-05-01-item">ホーム</span>
          <span class="d03-05-01-sep">/</span>
          <span class="d03-05-01-item">サービス案内</span>
          <span class="d03-05-01-sep">/</span>
          <span class="d03-05-01-item d03-05-01-current">料金プラン</span>
        </nav>

CSS

.d03-05-01-crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;font-family:sans-serif;color:#666;gap:6px}
        .d03-05-01-item{color:#666}
        .d03-05-01-sep{color:#bbb}
        .d03-05-01-current{color:#222;font-weight:600}

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