読者です 読者をやめる 読者になる 読者になる

0からはじめるWebサイト制作の勉強|知行合一

2015年6月より求職者支援訓練でWebサイト制作を学んでいます。学んだことの要点や実践での備忘録を記録して、一歩ずつ成長に努めます。

パンくずリストの作り方

Webサイトを訪れるユーザーの使いやすさを良くする、パンくずリストについて
概念や作り方を調べました。

今後の備忘録として残そうと思います。

パンくずリストとは

パンくずリストは、サイトを訪問しているユーザーが、今、サイトのどの階層にいるのかを伝えるナビゲーションのことです。
パンくずリスト - Wikipedia

パンくずリストの役割

パンくずリストの役割は大きく分けて2つの役割があります。

  • ユーザーに、今、サイトのどこにいるかを明確に認識させる。

パンくずリスト作成の考え方

  • パンくずリストは、階層構造をリスト化したものなので、リスト要素で各階層を構成する
  • 階層構造は、各階層の並び順に意味があるため、番号付リストの「ol」要素を使う
  • 階層を区切る「>」マークは文書として意味は無いため、CSSで疑似要素を使って、「>」マークを追加する

サンプル

パンくずリストサンプルサイトに作成しました。
サンプルで作成したパンくずリストのHTMLとCSSは以下の通りです。

HTMLコード

<nav>
<ol class="breadcrumb">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="#" itemprop="url"><span itemprop="title">ホーム</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="..." itemprop="url"><span itemprop="title">サービス</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">Webサイト制作</span></li>
</ol>
</nav>
HTMLの解説

li要素に追加された
itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"
パンくずリストである事を設定しています。

a要素に追加された
itemprop="url"
で、a要素がパンくずリストのURLである事を設定しています。


で、span要素の内容はパンくずリストのタイトルである事を設定しています。

CSSコード

/* パンくずリストのスタイル */
ol.breadcrumb {
list-style-type: none; /* 1.2.3.・・・のマーカーを消す */
}
ol.breadcrumb li {
display: inline; /* liをインライン表示させる */
}
ol.breadcrumb li::before {
content: '\00bb'; /* li要素の前に>>記号を追加 */
}
ol.breadcrumb li:first-child:before {
content: ''; /* 最初のli要素から>>記号を消す */
}

作成したパンくずリストの確認

作成したパンくずリストは、「structured data testing tool」で、正常にGoogleが認識するのかをプレビュー出来ます。
developers.google.com

まとめ

ユーザーの使い易さ、検索エンジンにサイトの階層を正しく認識させると言う観点からパンくずリストを作成することをおすすめします。