パンくずリスト

パンくずリストとは、ウェブサイトのページ階層をリスト化したナビゲーションのことです。
どこの階層にいるかわかりやすくします。
決まりはありませんが、ページの上部に設置するのが一般的です。

パンくずリストを設置することによるメリット
●検索エンジンがクロールしやすくなる
●探している情報にアクセスしやすくなる

パンくずリスト練習用Blank fileダウンロード

01　引用符（›）や大なり記号（>）を使う

  1. TOP
  2. ホテル案内
  3. 温泉

CSS

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

.breadcrumb li:not(:last-of-type)::after {
content: "›";
margin: 0 .6em;
color: #777;
}

HTML

<ol class="breadcrumb">
<li><a href="#">TOP</a></li>
<li><a href="#">ホテル案内</a></li>
<li>温泉</li>
</ol>



02　スラッシュ（／）を使う

  1. TOP
  2. ホテル案内
  3. 温泉

CSS

.breadcrumb2 {
display: flex;
flex-wrap: wrap;
list-style: none;
}

.breadcrumb2 li:not(:last-of-type)::after {
content: "/";
margin: 0 .6em;
color: #777;
}

HTML

<ol class="breadcrumb2">
<li><a href="#">TOP</a></li>
<li><a href="#">ホテル案内</a></li>
<li>温泉</li>
</ol>



03　二重引用符（»）を用いる

  1. TOP
  2. ホテル案内
  3. 温泉

CSS

.breadcrumb3 {
display: flex;
flex-wrap: wrap;
list-style: none;
}

.breadcrumb3 li:not(:last-of-type)::after {
content: "»";
margin: 0 .6em;
color: #777;
}

HTML

<ol class="breadcrumb3">
<li><a href="#">TOP</a></li>
<li><a href="#">ホテル案内</a></li>
<li>温泉</li>
</ol>