【HTML/CSS】コピペでOK！パンくずリストの作り方や基礎を解説

こんにちは、リバティエンジニア[?]のFUNA（フナ）です。

現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回はHTML/CSSでサイトを制作するときなどに利用する「パンくずリスト」について作り方や基礎知識についてのお話をしていきます。

サンプルコードも掲載し、コピペでも簡単に実装できるようにしていますので、よかったら参考にしてみてください。

【HTML/CSS】パンくずリストとは？

そもそもパンくずリストとは何なのでしょうか。

簡単に言うと”パンくずリスト”とはユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリストのことです。

英語では「breadcrumbs」と言われています

例えば今見ていただいているこのページですが、ページ上部に(HOME > プログラミング > CODE > HTML/CSS)の表示があります。

つまり、自分が今開いて見ているページはサイト全体で見たときにどの位置にあるページなのかを示しています。

これが「パンくずリスト」です。

パンくずリストを設置するメリット

この「パンくずリスト」を設置するメリットを見てみましょう。

 パンくずリストの設置には２つの意味があります

ユーザーが迷いにくくなる

まずは1つ目、ユーザーにとっての意味です。

これは、カテゴリーの構造が一目見てわかるので「今どこにいるのか」がすぐに分かります。

そして前の階層のテキストはリンクになっているため、サイトを巡回しやすくなるのです。

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】関連記事