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

アイコン付きホームパンくず

先頭にホームアイコンを配置しトップページへの起点を示す形。店舗サイトや施設案内ページに向きます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-07-crumb" aria-label="breadcrumb">
          <span class="d03-05-07-home" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 3 2 12h3v8h5v-6h4v6h5v-8h3z" fill="currentColor"/></svg>
          </span>
          <span class="d03-05-07-sep">/</span>
          <span class="d03-05-07-item">店舗案内</span>
          <span class="d03-05-07-sep">/</span>
          <span class="d03-05-07-item d03-05-07-current">アクセス</span>
        </nav>

CSS

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

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