MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペで作る！おしゃれなパンくずリストデザイン5選

【HTML/CSS】コピペで作る！おしゃれなパンくずリストデザイン5選

CSS
矢印、塗りつぶしの矢印、スラッシュを使用した3種類のシンプルなパンくずリストのデザイン例。
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なおしゃれなパンくずリストデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、パンくずリスト作成にはul・li・olタグを利用します。

ul・li・olタグの使い方を詳しく知りたい人は「【html&css】ul・li・olの使い方とおしゃれなデザインリスト」を一読ください。

【HTML/CSS】ul・li・olの使い方とおしゃれなリストデザイン
目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、パンくずリスト以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock
Code Stock

シンプルなパンくずリスト

ここでは、以下のシンプルなパンくずリストデザイン例を記載しています。

シンプルなパンくずリストデザイン
  • 矢印
  • 矢印（塗りつぶし）
  • スラッシュ

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もパンくずリストページでは選択式でご用意しました。

調整項目一覧
  • 文字色
  • アイコン色
  • ホームアイコン：あり, なし

ご興味があれば「パンくずリスト一覧ページ」を一読ください。

Code Stock
BREADCRUMB | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Simple breadcrumb シンプルなパンくずリスト ホーム カテゴリー タイトル 矢印▼ ホーム カテ…

矢印

HTMLコード表示
<ul class="breadcrumb-1">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">カテゴリー</a></li>
  <li>タイトル</li>
</ul>
CSSコード表示
.breadcrumb-1 {
  display: flex;
  gap: 0 22px;
  list-style: none;
  padding: 0;
  font-size: .9em;
}

.breadcrumb-1 li {
  display: flex;
  align-items: center;
}

.breadcrumb-1 li:first-child::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  content: '';
}

.breadcrumb-1 li:not(:last-child)::after {
  display: inline-block;
  transform: rotate(45deg);
  width: .3em;
  height: .3em;
  margin-left: 10px;
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  content: '';
}

.breadcrumb-1 a {
  color: #333333;
  text-decoration: none;
}

矢印（塗りつぶし）

HTMLコード表示
<ul class="breadcrumb-2">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">カテゴリー</a></li>
  <li>タイトル</li>
</ul>
CSSコード表示
.breadcrumb-2 {
  display: flex;
  gap: 0 20px;
  list-style: none;
  padding: 0;
  font-size: .9em;
}

.breadcrumb-2 li {
  display: flex;
  align-items: center;
}

.breadcrumb-2 li:first-child::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  content: '';
}

.breadcrumb-2 li:not(:last-child)::after {
  display: inline-block;
  width: .3em;
  height: .6em;
  margin-left: 12px;
  background-color: #333333;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: '';
}

.breadcrumb-2 a {
  color: #333333;
  text-decoration: none;
}

スラッシュ

HTMLコード表示
<ul class="breadcrumb-3">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">カテゴリー</a></li>
  <li>タイトル</li>
</ul>
CSSコード表示
.breadcrumb-3 {
  display: flex;
  gap: 0 15px;
  list-style: none;
  padding: 0;
  font-size: .9em;
}

.breadcrumb-3 li {
  display: flex;
  align-items: center;
}

.breadcrumb-3 li:first-child::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  content: '';
}

.breadcrumb-3 li:not(:last-child)::after {
  display: inline-block;
  margin-left: 15px;
  color: #333333;
  content: '/';
}

.breadcrumb-3 a {
  color: #333333;
  text-decoration: none;
}

矢印大きめなパンくずリスト

ここでは、以下の矢印大きめなパンくずリストデザイン例を記載しています。

矢印大きめなパンくずリストデザイン
  • 灰色背景
  • カラフルな背景

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もパンくずリストページでは選択式でご用意しました。

調整項目一覧
  • 背景色
  • 文字色
  • アイコン色
  • 区切り線の色
  • ホームアイコン：あり, なし

ご興味があれば「パンくずリスト一覧ページ」を一読ください。

Code Stock
BREADCRUMB | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Simple breadcrumb シンプルなパンくずリスト ホーム カテゴリー タイトル 矢印▼ ホーム カテ…

灰色背景

HTMLコード表示
<ul class="breadcrumb-4">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">カテゴリー</a></li>
  <li>タイトル</li>
</ul>
CSSコード表示
ul.breadcrumb-4 {
  display: flex;
  flex-wrap: nowrap;
  list-style: none !important;
  padding: 0 !important;
  margin-bottom: 2em !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  gap: 0 !important;
}

.breadcrumb-4 li {
  position: relative;
  padding: 10px 10px 10px 30px;
  background-color: #f2f2f2;
  color: #333333;
  margin: 0;
  margin-right: 4px;
  display: flex;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  list-style: none !important;
}

.breadcrumb-4 li:first-child {
  padding-left: 15px;
  border-radius: 4px 0 0 4px;
}

.breadcrumb-4 li::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px; 
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #f2f2f2;
  z-index: 10;
}

.breadcrumb-4 li:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #ffffff; 
  z-index: 5;
}

.breadcrumb-4 li:last-child::after {
  display: none;
}
.breadcrumb-4 li:last-child {
  border-radius: 0 4px 4px 0;
  padding-right: 20px;
}

.breadcrumb-4 a {
  color: #333333;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.breadcrumb-4 li:first-child a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

カラフルな背景

HTMLコード表示
<ul class="breadcrumb-5">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">カテゴリー</a></li>
  <li>タイトル</li>
</ul>
CSSコード表示
ul.breadcrumb-5 {
  display: flex;
  flex-wrap: nowrap;
  list-style: none !important;
  padding: 0 !important;
  margin-bottom: 2em !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  gap: 0 !important;
}

.breadcrumb-5 li {
  position: relative;
  padding: 10px 10px 10px 30px;
  background-color: #2589d0;
  color: #ffffff;
  margin: 0;
  margin-right: 4px;
  display: flex;
  align-items: center;
  height: 40px; 
  box-sizing: border-box;
  list-style: none !important;
}

.breadcrumb-5 li:first-child {
  padding-left: 15px;
  border-radius: 4px 0 0 4px;
}

.breadcrumb-5 li::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px; 
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #2589d0;
  z-index: 10;
}

.breadcrumb-5 li:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #ffffff; 
  z-index: 5;
}

.breadcrumb-5 li:last-child::after {
  display: none;
}

.breadcrumb-5 li:last-child {
  border-radius: 0 4px 4px 0;
  padding-right: 20px;
}

.breadcrumb-5 a {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.breadcrumb-5 li:first-child a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

よくある質問（FAQ）

スマホ表示のとき、パンくずリストが長すぎて複数行に改行されてしまいダサいです。綺麗に見せる方法はありますか？

スマホ環境では、改行させずに「横スクロール」させる手法が現在の主流であり最も美しい解決策です。

CSSでパンくずリストの親要素（<ul>など）に対して、white-space: nowrap;（改行禁止）とoverflow-x: auto;（はみ出た部分をスクロール）を指定するだけで、スマホの画面幅に収まりきらない長い階層も、指でスワイプして確認できるようになります。

区切り文字（「>」や「/」など）を、自分のお気に入りのアイコン画像に変更するにはどうすればいいですか？

CSSの疑似要素（::after）を書き換えることで簡単にカスタマイズ可能です。

当記事のコード内にあるcontent: ">";の部分をFont AwesomeなどのアイコンフォントのUnicode（例：content: "\f105";）に変更したり、background-imageを使って自作のSVGアイコンを読み込ませることで、サイトの雰囲気に合わせたオリジナルの区切りデザインに変更できます。

パンくずリストの一番最後（今見ているページ）のテキストにも、リンク（aタグ）は貼るべきですか？

いいえ、現在のページにはリンクを貼らないのがUI設計の鉄則です。

今いるページへのリンクをクリックしても、同じ画面が再読み込みされるだけでユーザーにとって全く意味がありません。

最後の項目は<a>タグではなく<span>などのテキスト要素にし、CSSで文字色を少し薄くするなどして「ここは押せない（現在地である）」ことを視覚的に伝えるのがベストプラクティスです。

パンくずリストはSEO（検索順位）に効果があるって本当ですか？

はい、非常に重要な役割を持ちます。

クローラー（Googleのロボット）がサイトの構造を正しく理解しやすくなるためです。

ただし、単にHTMLとCSSで見た目を作るだけではなく、「構造化データ（JSON-LDやMicrodata）」というGoogle指定のルールに則ってマークアップすることで、初めて検索結果の画面に綺麗なパンくずリストを表示させることができます。

この記事のHTMLとCSSをWordPressのテーマにコピペすれば、自動で実際のカテゴリや記事名が表示されますか？

いいえ、この記事のコードはあくまで「静的なデザイン（見た目）」の枠組みです。

WordPressで現在見ている記事のカテゴリやタイトルを自動で（動的に）出力させるには、PHPの知識が必要になります。

実務やブログ運営では、テーマに標準搭載されているパンくず出力機能やSEOプラグインが吐き出すHTMLに対して、当記事のCSSを当てはめてデザインを上書きするという使い方が一般的です。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次