HTML/CSS

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

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

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

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

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

 

この記事はこんな方におすすめ

  • HTML/CSSでパンくずリストの作り方が知りたい方
  • パンくずリストをコピペで簡単に作りたい方

 

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

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

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

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

 

例えば今見ていただいているこのページですが、ページ上部に(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]これだけ覚えて!超簡単レスポンシブ対応

続きを見る

プログラミング必須ツール『テキストエディタ』とは?現役エンジニアのおすすめも紹介!

続きを見る

 

【HTML/CSS】関連記事

【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法

こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   この記事はこんな方におすすめ HTM ...

【2020年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】

2020年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。

【HTML/CSS】 縦方向・横方向で中央揃えしてみよう!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   私は現役でフリーランスエンジニアとしてWebサービスや ...

[HTML5] タグ全部紹介します!

目次 はじめにHTML5タグ一覧まとめはじめに 今回はHTML5におけるHTMLタグをすべて公開し、解説していこうと思います。意外と結構多いんですが、わかりやすく簡単に解説していきます! 各タグを詳し ...

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

こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTML/CSSでサイトを制作するときなどに ...

【HTML/CSS】 "max-width"と"min-width" 使い方まとめ

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 HTML/CSSでレスポンシブデザインをするためには必ず習 ...

[HTML] 見出しタグ(h1~h6)を正しく扱う-保存版-

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTMLにおける見出しタグの使い方について解説します ...

[HTML] divとspanタグの違いは?誰にでもわかりやすく解説

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTMLの<div>タグと<spa ...

最近の投稿

「ワーケーション」とは?環境省が推している理由やメリットを解説

「ワーケーション」とは?2020年7月に、菅官房長官が「ワーケーション」の普及について表明してSNSやニュースで「ワーケーション」が話題になりました。環境省が推進している理由や導入メリット・デメリットを解説します。

レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

IT特化型転職エージェントの「レバテックキャリア 」は未経験でも転職することができるのか?について実際に利用した方のクチコミを元に調査しました。

レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

【2020年10月更新】IT系の転職エージェントで有名な「レバテックキャリア」ですが、なぜ悪い評判や悪い口コミが多いのか?その理由について説明します。また、是非登録すべき他の転職エージェントもご紹介していますので、参考にしてみてください。

その会社は大丈夫?知っておきたいブラック企業の特徴

就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

Copyright© FUNA BLOG , 2020 All Rights Reserved.