こんにちは、リバティエンジニア[?]のFUNA(フナ)です。
現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
今回はHTML/CSSでサイトを制作するときなどに利用する「パンくずリスト」について作り方や基礎知識についてのお話をしていきます。
サンプルコードも掲載し、コピペでも簡単に実装できるようにしていますので、よかったら参考にしてみてください。
この記事はこんな方におすすめ
- HTML/CSSでパンくずリストの作り方が知りたい方
- パンくずリストをコピペで簡単に作りたい方
目次
【HTML/CSS】パンくずリストとは?
そもそもパンくずリストとは何なのでしょうか。
簡単に言うと”パンくずリスト”とはユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリストのことです。

例えば今見ていただいているこのページですが、ページ上部に(HOME > プログラミング > CODE > HTML/CSS)の表示があります。
つまり、自分が今開いて見ているページはサイト全体で見たときにどの位置にあるページなのかを示しています。
これが「パンくずリスト」です。
パンくずリストを設置するメリット
この「パンくずリスト」を設置するメリットを見てみましょう。
ユーザーが迷いにくくなる
まずは1つ目、ユーザーにとっての意味です。
これは、カテゴリーの構造が一目見てわかるので「今どこにいるのか」がすぐに分かります。
そして前の階層のテキストはリンクになっているため、サイトを巡回しやすくなるのです。
ポイント
- パンくずリストを設置すると上のようにGoogleの検索結果にも反映される
- アクセス前から検索ユーザーに対して、カテゴリー構造を伝えることができる
SEO効果が期待できる
サイトを分かりやすいカテゴリー構造にした上で、正しくぱんくずリストを作成する事でSEOの効果も期待できます。
なぜSEO効果があるのか?
ぱんくずリストのリンクテキスト(アンカーテキスト)にキーワードを入れることができるから。
【HTMLコード】パンくずリストの作り方
ではHTMLでのパンくずリストの作り方を見ていきましょう!
コピペでも簡単に実装できるので、動きを見ながら実装したい方は使ってみてください。
※下記の【HTML】【CSS】ボタンを押すとソースコードが見れます。
See the Pen breadcrumb by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
簡単に解説すると、<li>〜</li>の1つのカタマリが1つのパンくず(階層)を表しています。
そのため、カテゴリーの階層数によって<li>〜</li>の数は変わります。
【HTML/CSS】パンくずリストのデザインカスタム
ではパンくずリストのシンプルなデザインカスタムをご紹介します。
※下記の【HTML】【CSS】ボタンを押すとソースコードが見れます。
See the Pen breadcrumb-2 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
このデザインはシンプルですが、凝ったデザインに見えるので非常にお勧めです。
こちらもコピペで簡単に使えるので、是非使ってくださいね。
まとめ
今回は、HTMLでパンくずリストを作成する意味や作り方をご紹介しました。
パンくずリストを設置すると、Googleに「質の良いサイト」である。と判定する際の判断基準のひとつになります。
意外と見落としがちですが、簡単に実装できてサイト検索順位に関わることなので試してみましょう。
-
【HTML/CSS】超簡単にレスポンシブでスマホ対応をする方法【コピペOK】
続きを見る
-
プログラミング必須ツール『テキストエディタ』とは?現役エンジニアのおすすめも紹介!
続きを見る
【HTML/CSS】関連記事
-
CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。
-
【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!
今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。
-
【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介
HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。
-
【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法
こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ HTM ...
-
【2021年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】
2021年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。
-
【HTML/CSS】 縦・横方向で中央揃え(中央寄せ)してみよう!【コピペOK】
今回はHTML/CSSで要素を縦と横方向で中央揃え(中央寄せ)する方法について、簡単にコピペで実装できるようにいくつかのパターンを紹介していこうと思います。上手く中央寄せできない場合などにぜひ参考にしてください。
-
HTML5のタグを全部まとめて一覧でご紹介!【詳細リンク付き】
今回は、HTML5のHTMLタグをすべて公開し、解説していこうと思います。各タグを詳しく解説するページも順次作っていきますので、できたものからリンクで飛べるようまとめておきます!
-
【HTML/CSS】コピペでOK!パンくずリストの作り方や基礎を解説
こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTML/CSSでサイトを制作するときなどに ...