サイトの中で今どのページを見ているか、訪れた人にすぐ伝えられているでしょうか。
ページの上部に「トップ ＞ サービス ＞ 料金」のように表示する「パンくずリスト」は、地味ですが、使いやすいサイトづくりに欠かせない要素です。
この記事では、コピペするだけで使えるパンくずリストを20個まとめました。
区切り記号やアイコン、背景の有無など、幅広いバリエーションを用意しています。
見出し・カードの記事と同じく、HTMLとCSSを分けて掲載しています。
今回も20個、結構なボリュームだね！
うん、使い方だけ先に説明するから、そのあとは気になるところから見てね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。
続いて、HTMLのコードを、ページの上部など、現在地を示したい場所に貼り付けます。
多くはナビゲーションとしての意味を持たせるため、navタグとolタグ（順序のあるリスト）で作っています。
各リンクのhref（リンク先）は、サンプルでは「#」にしているので、実際のページURLに書き換えてください。
01. シンプルなスラッシュ区切り
「/」で区切った、もっとも基本のパンくずリストです。
実際の見た目
HTMLコード
<nav class="kts-bc01" aria-label="パンくずリスト"> <a href="#">トップ</a> / <a href="#">サービス</a> / <span>料金</span> </nav>CSSコード
.kts-bc01 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc01 a { color: #3F8CFF; text-decoration: none; } .kts-bc01 a:hover { text-decoration: underline; } .kts-bc01 span { color: #444; }02. 山括弧（＞）区切り
「＞」を区切りに使った、よく見かける定番の形です。
実際の見た目
HTMLコード
<nav class="kts-bc02" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">＞</span><a href="#">ブログ</a><span class="sep">＞</span><span class="current">記事一覧</span> </nav>CSSコード
.kts-bc02 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc02 a { color: #3F8CFF; text-decoration: none; } .kts-bc02 .sep { margin: 0 8px; color: #D8DCE1; } .kts-bc02 .current { color: #444; }03. 矢印アイコン区切り
「→」の矢印を区切りに使ったパンくずリストです。
実際の見た目
HTMLコード
<nav class="kts-bc03" aria-label="パンくずリスト"> <a href="#">ホーム</a><span class="sep">→</span><a href="#">商品一覧</a><span class="sep">→</span><span class="current">商品詳細</span> </nav>CSSコード
.kts-bc03 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc03 a { color: #2E6F5E; text-decoration: none; } .kts-bc03 .sep { margin: 0 8px; color: #B7C2CC; } .kts-bc03 .current { color: #444; font-weight: 600; }04. 中黒（・）区切り
「・」を使った、やわらかい印象のパンくずリストです。
実際の見た目
HTMLコード
<nav class="kts-bc04" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">・</span><a href="#">よくある質問</a> </nav>CSSコード
.kts-bc04 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc04 a { color: #3F8CFF; text-decoration: none; } .kts-bc04 .sep { margin: 0 6px; }05. ホームアイコン始まりのパンくず
先頭を家のアイコンにした、視覚的に分かりやすい形です。
実際の見た目
HTMLコード
<nav class="kts-bc05" aria-label="パンくずリスト"> <a href="#" aria-label="ホーム">🏠</a><span class="sep">＞</span><a href="#">お知らせ</a><span class="sep">＞</span><span class="current">詳細</span> </nav>CSSコード
.kts-bc05 { font-size: 13px; color: #8A94A0; font-family: sans-serif; display: flex; align-items: center; } .kts-bc05 a { color: #3F8CFF; text-decoration: none; } .kts-bc05 .sep { margin: 0 8px; color: #D8DCE1; } .kts-bc05 .current { color: #444; }06. 現在地だけ色付けしたパンくず
リンク部分は控えめに、現在地だけ濃い色で示す形です。
実際の見た目
HTMLコード
<nav class="kts-bc06" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><a href="#">会社情報</a><span class="sep">/</span><span class="current">アクセス</span> </nav>CSSコード
.kts-bc06 { font-size: 13px; font-family: sans-serif; } .kts-bc06 a { color: #B0B7BE; text-decoration: none; } .kts-bc06 .sep { margin: 0 6px; color: #D8DCE1; } .kts-bc06 .current { color: #1F2933; font-weight: 700; }07. 背景付きピル型パンくず
各項目を背景色付きのピル型にした、カジュアルな見た目です。
実際の見た目
HTMLコード
<nav class="kts-bc07" aria-label="パンくずリスト"> <a href="#">トップ</a><a href="#">ブログ</a><span class="current">記事タイトル</span> </nav>CSSコード
.kts-bc07 { display: flex; gap: 6px; font-family: sans-serif; font-size: 12px; } .kts-bc07 a, .kts-bc07 .current { padding: 4px 12px; background: #F1F3F5; border-radius: 999px; color: #444; text-decoration: none; } .kts-bc07 .current { background: #2E6F5E; color: #fff; }08. 矢印タグ形状でつながるパンくず
矢印の形をしたタグが連なる、立体的な見た目です。
実際の見た目
HTMLコード
<nav class="kts-bc08" aria-label="パンくずリスト"> <a href="#">トップ</a><a href="#">サービス一覧</a><span class="current">詳細</span> </nav>CSSコード
.kts-bc08 { display: flex; font-family: sans-serif; font-size: 12px; } .kts-bc08 a, .kts-bc08 .current { padding: 6px 18px 6px 14px; background: #E4E7EB; color: #444; text-decoration: none; clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); margin-right: -10px; } .kts-bc08 .current { background: #2E6F5E; color: #fff; }09. 下線ホバーのパンくず
カーソルを合わせると下線が現れる、控えめな動きのパンくずです。
実際の見た目
HTMLコード
<nav class="kts-bc09" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><a href="#">導入事例</a> </nav>CSSコード
.kts-bc09 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc09 a { position: relative; color: #333; text-decoration: none; } .kts-bc09 a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: #333; transform: scaleX(0); transition: transform 0.2s ease; } .kts-bc09 a:hover::after { transform: scaleX(1); } .kts-bc09 .sep { margin: 0 8px; }10. 全幅の背景バーに乗ったパンくず
帯状の背景の上に表示する、ページ上部向けのパンくずです。
実際の見た目
HTMLコード
<nav class="kts-bc10" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">＞</span><span class="current">お問い合わせ</span> </nav>CSSコード
.kts-bc10 { display: block; width: 100%; max-width: 400px; padding: 10px 16px; background: #F1F3F5; font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc10 a { color: #3F8CFF; text-decoration: none; } .kts-bc10 .sep { margin: 0 8px; } .kts-bc10 .current { color: #444; }11. 現在地に太字と下線を使うパンくず
最後の項目だけ、太字と下線で強調する形です。
実際の見た目
HTMLコード
<nav class="kts-bc11" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="current">料金プラン</span> </nav>CSSコード
.kts-bc11 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc11 a { color: #3F8CFF; text-decoration: none; } .kts-bc11 .sep { margin: 0 8px; } .kts-bc11 .current { color: #1F2933; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }12. カード内に収めたパンくず
枠線付きの箱の中に、パンくずリストを収める形です。
実際の見た目
HTMLコード
<nav class="kts-bc12" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="current">会員登録</span> </nav>CSSコード
.kts-bc12 { display: inline-block; padding: 8px 16px; border: 1px solid #E4E4E4; border-radius: 6px; font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc12 a { color: #3F8CFF; text-decoration: none; } .kts-bc12 .sep { margin: 0 8px; } .kts-bc12 .current { color: #444; }13. ダークテーマのパンくず
暗い背景に合わせた配色のパンくずリストです。
実際の見た目
HTMLコード
<nav class="kts-bc13" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="current">開発者向け情報</span> </nav>CSSコード
.kts-bc13 { font-size: 13px; font-family: sans-serif; color: #6B7580; } .kts-bc13 a { color: #4CE0D2; text-decoration: none; } .kts-bc13 .sep { margin: 0 8px; } .kts-bc13 .current { color: #E6E9EC; }14. 現在地に背景バッジを付けたパンくず
最後の項目だけ、背景色付きのバッジのように見せる形です。
実際の見た目
HTMLコード
<nav class="kts-bc14" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">＞</span><span class="current">キャンペーン詳細</span> </nav>CSSコード
.kts-bc14 { font-size: 13px; font-family: sans-serif; color: #8A94A0; display: flex; align-items: center; } .kts-bc14 a { color: #3F8CFF; text-decoration: none; } .kts-bc14 .sep { margin: 0 8px; } .kts-bc14 .current { background: #D97757; color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 12px; }15. 中間を省略したパンくず
階層が深い時に、途中を「…」で省略する形です。
実際の見た目
HTMLコード
<nav class="kts-bc15" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="ellipsis">…</span><span class="sep">/</span><span class="current">現在のページ</span> </nav>CSSコード
.kts-bc15 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc15 a { color: #3F8CFF; text-decoration: none; } .kts-bc15 .sep { margin: 0 8px; } .kts-bc15 .ellipsis { color: #C7CDD3; } .kts-bc15 .current { color: #444; }16. 斜体スラッシュのスタイリッシュなパンくず
区切りのスラッシュを斜体にした、少し洗練された見た目です。
実際の見た目
HTMLコード
<nav class="kts-bc16" aria-label="パンくずリスト"> <a href="#">Top</a><span class="sep">/</span><a href="#">Works</a><span class="sep">/</span><span class="current">Detail</span> </nav>CSSコード
.kts-bc16 { font-size: 13px; font-family: sans-serif; color: #8A94A0; letter-spacing: 0.02em; } .kts-bc16 a { color: #1F2933; text-decoration: none; } .kts-bc16 .sep { margin: 0 10px; font-style: italic; color: #C7CDD3; } .kts-bc16 .current { color: #8A94A0; }17. モバイル向け「前のページに戻る」形式
パンくず全体ではなく、1つ前のページだけを示す簡易形式です。
実際の見た目
HTMLコード
<nav class="kts-bc17" aria-label="パンくずリスト"> <a href="#"><span aria-hidden="true">←</span> サービス一覧に戻る</a> </nav>CSSコード
.kts-bc17 { font-size: 13px; font-family: sans-serif; } .kts-bc17 a { color: #3F8CFF; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }18. グラデーション区切り線付きパンくず
各項目の間に、小さなグラデーションの点を挟む形です。
実際の見た目
HTMLコード
<nav class="kts-bc18" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="dot"></span><a href="#">特集</a><span class="dot"></span><span class="current">夏の特集</span> </nav>CSSコード
.kts-bc18 { display: flex; align-items: center; font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc18 a { color: #333; text-decoration: none; } .kts-bc18 .dot { width: 5px; height: 5px; border-radius: 50%; margin: 0 10px; background: linear-gradient(135deg, #6C63FF, #3F8CFF); } .kts-bc18 .current { color: #444; }19. 番号付き階層パンくず
各階層に番号を振って、深さを分かりやすくする形です。
実際の見た目
HTMLコード
<nav class="kts-bc19" aria-label="パンくずリスト"> <a href="#"><span class="n">1</span>トップ</a><span class="sep">/</span><a href="#"><span class="n">2</span>マニュアル</a><span class="sep">/</span><span class="current"><span class="n">3</span>初期設定</span> </nav>CSSコード
.kts-bc19 { font-size: 13px; font-family: sans-serif; color: #8A94A0; display: flex; align-items: center; } .kts-bc19 a, .kts-bc19 .current { display: inline-flex; align-items: center; gap: 5px; color: #333; text-decoration: none; } .kts-bc19 .n { width: 16px; height: 16px; line-height: 16px; text-align: center; background: #E4E7EB; border-radius: 50%; font-size: 10px; color: #666; } .kts-bc19 .sep { margin: 0 8px; } .kts-bc19 .current { color: #1F2933; font-weight: 700; }20. 全項目に下線を引いたパンくず
現在地も含めて、すべての項目にうっすら下線を引く形です。
実際の見た目
HTMLコード
<nav class="kts-bc20" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><a href="#">採用情報</a><span class="sep">/</span><span class="current">募集要項</span> </nav>CSSコード
.kts-bc20 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc20 a, .kts-bc20 .current { border-bottom: 1px solid #D8DCE1; padding-bottom: 1px; color: #444; text-decoration: none; } .kts-bc20 .sep { margin: 0 8px; }カスタマイズの小ワザ
- 各リンクのhref（href=”#”の部分）は、実際のページURLに書き換えてください。
- 最後の現在地の項目は、リンクにせずspanタグのままにするのが一般的です。今見ているページ自体へのリンクは不要なためです。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
- 構造化データ（パンくずリストであることを検索エンジンに伝える設定）を追加したい場合は、別途JSON-LDなどの設定が必要です。この記事のコードは見た目のみを扱っています。
- 階層が深すぎる場合は、15番のように途中を省略する形も検討してください。
まとめ｜早見表
| 雰囲気 | 該当するパンくず |
|---|---|
| シンプル・定番 | 01, 02, 03, 04, 06 |
| 背景・装飾あり | 07, 08, 10, 12, 14 |
| アイコン・記号付き | 05, 17, 18, 19 |
| 動き・ホバー | 09 |
| 階層が深いサイト向け | 15 |
| 個性的なトーン | 13, 16, 20 |
パンくずリストって、地味だけど大事な役割なんだね。
うん、今どこにいるか分かると、サイトの中で迷いにくくなるんだ。区切り線の記事と組み合わせても使いやすいよ。
20個のパンくずリストは、区切り記号・背景・アイコンの違いで、サイトのトーンに合わせて選べる。現在地の項目はリンクにせず示すのが基本である。
※本記事のコードは2026年9月時点の主要ブラウザでの表示を想定しています。08番のclip-pathは、一部の古いブラウザで見た目が異なる場合があります。
