コピペOK｜静的HTMLで使えるパンくずリスト3パターン

2025-10-25

記事内にプロモーションを含む場合があります。

ワンクリックで目的地へGO！

HTMLとCSSでパンくずリストを作る基本構造とデザイン3選

静的HTMLサイトで「パンくずリスト」をおしゃれに使いたい！そんな方に向けて、今回はHTMLとCSSだけで作れる3つのデザインを紹介します。

すべてコピペOKのコード付きなので、気に入ったスタイルをそのまま使えますよ。それでは、さっそく見ていきましょう！

この記事は「静的HTMLサイトにパンくずリストを入れてみたい初心者さん」向けです。

パンくずリストとは？

パンくずリストとは、ユーザーがサイトのどのページにいるのかを一目で把握できるナビゲーションのことです。

たとえば、こんな表示を見たことありませんか？

ホーム ＞ ブログ ＞ 記事タイトル

ページの上部などにさりげなく置かれていますが、実はユーザーにも検索エンジンにも大事な役割があるんです。

ありぃブログのパンくずリスト例のスクリーンショット — ありぃブログで使っているパンくずリストの例

ユーザーにとってのメリット

今どこにいるのかがすぐにわかる
カテゴリページなど、前の階層に戻りやすい
サイト全体の構造がわかるので、迷子になりにくい

特にコンテンツ量の多いサイトでは、ユーザーが迷わないための「道しるべ」になります。

うさちゃん

なるほど〜！迷子防止のナビみたいなものなんだね！

検索エンジンにとってのメリット

Googleなどがサイト構成を正しく理解しやすくなる
表示される検索結果に、ページの階層（＝リッチリザルト）が出ることも◎

SEO効果が劇的に上がるわけではありませんが、構造化の一歩として入れておくと好印象です。

設置する場所は？

パンくずリストは、ページの上部（ヘッダーのすぐ下）に表示されているのが一般的です。
他にも、サイドバーや記事タイトルの直前など、サイトのレイアウトに合わせて調整されていることが多いです。

ここでは、

JavaScriptやWordPressのような動的な仕組みは使わず
HTMLとCSSだけでシンプルに実装する方法をご紹介していきます。

「静的サイトを手作りしているけど、ちょっとおしゃれにしたい！」
そんな方にぴったりな内容になっています😊

HTMLの基本構造

それでは、実際にパンくずリストの基本形を作ってみましょう！以下のHTMLはどのデザインにも共通して使える“ベースコード”です。

どのデザインにも共通して使えるので、まずはこの形をコピーして使ってみてください。

<nav aria-label="Breadcrumb">
  <ul class="breadcrumb">
    <li><a href="/">ホーム</a></li>
    <li><a href="/blog/">ブログ</a></li>
    <li>記事タイトル</li>
  </ul>
</nav>

navタグは「ナビゲーションですよ」と伝えるためのタグ。
aria-label="Breadcrumb" をつけておくと、スクリーンリーダーにも優しい構造になります。

うさちゃん

アクセシビリティまで考えられてるんだね！やさしい設計だ〜

よく使うパンくずデザイン3選

ここからは、実際によく使われている3つのパンくずデザインを紹介していきますね。

どのデザインも、基本のHTMLは同じでOK！あとは追加するCSSでスタイルを変えるだけなので、気に入ったデザインをコピペしてすぐ使えますよ。

デザイン① ：カプセル型パンくずリスト

カプセル型パンくずリストの完成イメージのスクリーンショット — ▲カプセル型パンくずリストの完成イメージ

うさちゃん

かわいくて、ふんわりした雰囲気だね。企業サイトにも合いそう〜！

リンク部分を丸みのあるカプセル（pill型）で囲んだやさしいデザインです。
背景色と角丸をつけるだけで、ぐっと見やすく上品に印象になります。

CSSコード（このまま貼るだけでOK！）

/* デザイン① ：カプセル型パンくずリスト */
.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.breadcrumb a {
  display: inline-block;
  background-color: #eee;
  padding: 4px 10px;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 14px;
  color: #333;
  transition: background-color 0.3s, color 0.3s;
}

.breadcrumb a:hover {
  background-color: #e0e4e8;
}

.breadcrumb li:last-child {
  color: #555;
}

見た目の特徴

背景あり＋角丸＋中央揃えのテキスト
ボタン風に見えて、視認性◎

向いているサイト：ブログ、企業サイト、女性向けメディアなど

もっと「パンくず」らしくしたい方へ

「＞」入りで階層がわかりやすいカプセル型パンくずのスクリーンショット — ▲「＞」入りで階層がわかりやすいカプセル型パンくず

「カプセル同士の間に > を入れて、階層をもっとわかりやすくしたい！」
そんなときは、以下のCSSを追加で貼るだけでOKです👇

▼ 記号あり（構造強調系）

/* 擬似要素で「>」を表示（最初の要素には出ない） */
.breadcrumb li + li::before {
  content: ">";
  margin: 0 8px;
  color: #999;
}

これを加えると、上のスクショのように階層感のあるパンくずリストになります。

デザイン② ：擬似要素で「｜」や「>」を表現したスマート型

CSSだけで矢印や縦線を描いたスマート型パンくずリストのスクリーンショット — ▲CSSだけで矢印や縦線を描いたスマート型パンくずリスト

うさちゃん

文字じゃなくてCSSで描くんだね！ちょっとプロっぽい感じ〜✨

このデザインでは、パンくずの間に「記号」を入れず、CSSだけで描いた矢印や縦線を使って描くスタイルです。
テキストだけでは出せないシャープさがあり、すっきりスタイリッシュな印象になります。

見た目の特徴

「>」「｜」などの記号でパンくずを区切る
ミニマルで余計な装飾なし

向いているサイト：ミニマルデザイン、ポートフォリオサイト、ビジネス系サイト

このデザインは「共通ベースCSS」＋「パターンAまたはB」の組み合わせで完成します。

共通ベースだけでは矢印や縦線は表示されません。必ずどちらかのパターンを追加して使ってくださいね！
共通ベースCSS（両方に共通）

/* デザイン② ：共通ベース */
.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  position: relative;
  padding-left: 20px;
  margin-right: 8px;
}

.breadcrumb a {
  text-decoration: none;
  font-size: 14px;
  color: #333;
  transition: opacity 0.3s;
}

/* ホバー時：色は変えずに透明度で柔らかく */
.breadcrumb a:hover {
  opacity: 0.6;
}

/* 現在ページ（リンクなし） */
.breadcrumb li:last-child {
　font-weight: bold;
  color: #555;
}

お好みで > または｜のどちらかを選んで、以下のように ::before の部分だけ切り替えてみてくださいね。

うさちゃん

この段階ではまだ“区切り”が出てこないんだね。ここに追加のCSSを足して完成するんだ〜！

パターンA：`>` をCSSで表現する場合：（共通ベースに追加する）

右向き矢印で階層をつないだタイプのスクリーンショット — ▲パターンA：右向き矢印で階層をつないだタイプ

/* 擬似要素で矢印「>」を表現 */
.breadcrumb li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-top: 2px solid #0097b2;
  border-right: 2px solid #0097b2;
  transform: rotate(45deg) translateY(-50%);
}

::before でで斜めの線を2本描いて、>に見せています。カラーは爽やかな水色寄り（#0097b2）ですが、サイトカラーに合わせて変更OK！

パターンB：`｜`を縦線としてCSSで表現する場合：（共通ベースに追加する）

縦線でシンプルに区切るタイプのスクリーンショット — ▲パターンB：縦線でシンプルに区切るタイプ

/* パターンB:擬似要素で「縦線｜」を描く */
.breadcrumb li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 5px;
  width: 2px;
  height: 14px;
  background-color: #ccc;
  transform: translateY(-50%);
  border-radius: 1px;
}

ただの文字「｜」ではなく、2pxの縦線をCSSで描画しています。border-radiusで少し角を取って、やさしさもあり。

どちらのパターンも「共通ベース＋追加CSS」だけで実現できる、軽くてきれいなデザインです。

まずは矢印型を試して、サイトの雰囲気に合わせて縦線型にも切り替えてみましょう！

デザイン③：Font Awesomeアイコンを使ったリッチなパンくず

最後に紹介するのは、Font Awesomeのアイコンを取り入れたリッチなデザインです。パンくずリストにアイコンを少し加えるだけで、視覚的にもわかりやすく、UIの完成度がぐっと上がります。

特に「ホーム」部分に家アイコンをつけると、ユーザーが「トップページに戻りやすい」と直感的に感じやすくなります。

Font Awesomeの家アイコンを使ったパンくずリスト例のスクリーンショット — ▲Font Awesomeの家アイコンを使ったパンくずリスト例

うさちゃん

アイコンがあると、“ここがホームだよ！”ってすぐ伝わるね♪

見た目の特徴

アイコン＋ > マークで上品な印象に
サイト全体が引き締まり、高級感アップ

向いているサイト：UIにこだわりたいサービス系サイト、プロモーションページなど

事前準備：Font Awesomeを読み込もう

まずは、Font Awesomeを使うために以下のコードをHTMLの<head>タグ内に追加します👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

HTML構造（ホームだけアイコン付き）

次に、パンくずリストのHTML構造を用意します。このデザインでは、「ホーム」部分に Font Awesome の家アイコン（fa-house）を追加しています。

<nav aria-label="Breadcrumb">
  <ul class="breadcrumb">
    <li><a href="/"><i class="fa-solid fa-house"></i> ホーム</a></li>
    <li><a href="/blog/">ブログ</a></li>
    <li>記事タイトル</li>
  </ul>
</nav>

CSS（共通ベース＋アイコン調整込み）

次は、リッチな印象に整えるためのCSSです。共通ベースに加えて、アイコンの位置と区切りを少し調整しています。

/* デザイン③：Font Awesomeアイコンを使ったリッチなパンくず */

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

/* リンクスタイル */
.breadcrumb a {
  text-decoration: none;
  font-size: 14px;
  color: #333;
  transition: opacity 0.3s;
}

/* ホバー時：色は変えずにやさしく透過 */
.breadcrumb a:hover {
  opacity: 0.6;
}

/* 現在ページ（リンクなし） */
.breadcrumb li:last-child {
  color: #555;
}

/* パンくずの区切り */
.breadcrumb li + li::before {
  content: '/';
  margin: 0 10px;
  color: #999;
}

/* アイコンのスタイル（ホーム部分） */
.breadcrumb i {
  margin-right: 6px;
  color: #999;
  font-size: 14px;
}

アイコンとテキストの間には margin-right を入れて、詰まりすぎない自然な余白を確保しています。

ちょっとしたアイコンを加えるだけでも、見た目にリズムが生まれてUIが一気に整った印象になりますよ。

ポイントまとめ

Font Awesomeの読み込みが必須（CDNリンクを忘れずに！）
「ホーム」にだけアイコンをつけるのが自然で見やすい
区切りは「/」にして上品に統一

ちょっとしたアイコンを加えるだけでも、UI全体が整い“デザインに余白が生まれる”印象になります。特にサービスサイトやブランドページでは、統一感を出すのにぴったりです。

うさちゃん

“ほんのひと手間”で見た目がぐっと変わるね！まずはこのホームアイコンを入れてみよう〜♪

まとめ｜どのパンくずデザインを選ぶ？

今回紹介した3つのパンくずデザインは、どれも実際のWebサイトでよく使われている定番スタイルです。シンプルなものからリッチな見た目まで揃っているので、サイトの雰囲気や目的に合わせて選ぶことができます。

「見た目を整えたい」「ユーザーにやさしくしたい」「シンプルに仕上げたい」そんな想いにぴったりのデザインを見つけて、あなたのサイトに取り入れてみましょう◎

デザイン別の特徴まとめ

デザインパターン	特徴	向いているサイト
カプセル型	背景＋角丸でやさしい印象。ボタン風で視認性◎	ブログ、女性向けメディア、企業サイト
スマート型（擬似要素）	「>」や「｜」をCSSで表現。シンプル＆スタイリッシュ	ポートフォリオ、情報系、ミニマルデザイン
アイコン型（Font Awesome）	ホームにアイコン追加でUI感アップ。リッチでわかりやすい	サービス系、LP、UI重視のサイト