こんにちは、リバティエンジニア[?]の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】今回は、簡単にレスポンシブ対応（スマホ対応）する方法を、コピペでも実装できるように解説していきます。スマートフォンの普及によってWebページもパソコンだけでなく、スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきていますので、しっかりと覚えておきましょう。
続きを見る
-
プログラミング必須ツール『テキストエディタ』とは？現役エンジニアのおすすめも紹介！
こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はプログラミングやブログの下書きなどで、コードを書く時 ...
続きを見る
【HTML/CSS】関連記事
-
【コピペOK！】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】
FUNAこんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...
-
【CSS】たった1行のコピペで簡単！object fitで画像をトリミングする方法
CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。
-
【コピペOK】CSSでcounterを利用して自動ナンバリングする方法
今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。
-
【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。
-
【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。
-
CSSアニメーションを簡単に実装！コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。
-
【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ！
今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。
-
【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介
HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。