パンくずリストの作り方
Webサイトを訪れるユーザーの使いやすさを良くする、パンくずリストについて
概念や作り方を調べました。
今後の備忘録として残そうと思います。
パンくずリストとは
パンくずリストは、サイトを訪問しているユーザーが、今、サイトのどの階層にいるのかを伝えるナビゲーションのことです。
パンくずリスト - Wikipedia
パンくずリスト作成の考え方
- パンくずリストは、主要なナビゲーションの1つなので、nav要素で実装する
- パンくずリストは、階層構造をリスト化したものなので、リスト要素で各階層を構成する
- 階層構造は、各階層の並び順に意味があるため、番号付リストの「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>
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
