備忘録的プログラミングリファレンス

ナビメニュー, トピックパス

 UL タグエレメントと CSS を使った、横並びのナビメニュートピックパス(ブレッドクラムリスト)の作成方法を解説します。

横並びのナビメニュー
トピックパス(ブレッドクラムリスト)

 ここでいうナビメニュー( nav menu )とは、サイト内のページやコンテンツをスムーズに巡られるように設けられたリンクのことです。
 ナビバー( nav bar )、ナビゲーションメニュー( navigation menu )、ナビゲーションバー( navigation bar )と多様な呼ばれ方をしています。正式には決まっていないようです。

 サイトのユーザビリティのためには必要な要素で、多くの場合は UL タグエレメントを使用します。

リンクの用途による種類

 ページ内リンクには用途によって以下のような種類があるようです。

グローバルナビゲーション.. 
多くの場合はページのトップにあり全ページに共通したナビメニューである。カテゴリーごとに分けてあることが多い
ローカルナビゲーション..
カテゴリーごとのページを一覧で表したナビメニュー。ページの左右にある場合もある
トピックパス(ブレッドクラムリスト)..
ページの階層における位置を表したメニュー。最近は使用されないケースが多い
関連ナビゲーション..
関連性の高いページやコンテンツを網羅したリンク一覧
コンテンツ内ナビゲーション..
従来からある記事やコンテンツ内に設けられたリンクのこと
ページネーション..
web ページを本のページをめくるように操作できるように設けられたリンク。次ページ前ページといったリンクが多い。ページといった要素がない限りは使わない。

 トピックパス(ブレッドクラムリスト)ページネーションは明確な必要性がない限りはあまり使用されません。

 ここでは、グローバルナビゲーション、ローカルナビゲーションといったナビメニューとトピックパス(ブレッドクラムリスト)についてのみ解説します。

トピックパス(ブレッドクラムリスト)

 「webプログラムリファレンス >CSS > リストのスタイル」というように、現在のページがサイト内ではどの位置かをユーザに分かりやすくするためのメニューをトピックパスまたはブレッドクラムリストといいます。
 &t;を付加するために、::after:last-child を利用します。

 横並びナビメニューと同じように、li タグエレメント「display: inline;」に指定することで、UL の縦リストを横並びに整形します。