ナビメニュー, トピックパス
UL タグエレメントと CSS を使った、横並びのナビメニュー、トピックパス(ブレッドクラムリスト)の作成方法を解説します。
ここでいうナビメニュー( nav menu )とは、サイト内のページやコンテンツをスムーズに巡られるように設けられたリンクのことです。
ナビバー( nav bar )、ナビゲーションメニュー( navigation menu )、ナビゲーションバー( navigation bar )と多様な呼ばれ方をしています。正式には決まっていないようです。
サイトのユーザビリティのためには必要な要素で、多くの場合は UL タグエレメントを使用します。
リンクの用途による種類
ページ内リンクには用途によって以下のような種類があるようです。
- グローバルナビゲーション..
- 多くの場合はページのトップにあり全ページに共通したナビメニューである。カテゴリーごとに分けてあることが多い
- ローカルナビゲーション..
- カテゴリーごとのページを一覧で表したナビメニュー。ページの左右にある場合もある
- トピックパス(ブレッドクラムリスト)..
- ページの階層における位置を表したメニュー。最近は使用されないケースが多い
- 関連ナビゲーション..
- 関連性の高いページやコンテンツを網羅したリンク一覧
- コンテンツ内ナビゲーション..
- 従来からある記事やコンテンツ内に設けられたリンクのこと
- ページネーション..
- web ページを本のページをめくるように操作できるように設けられたリンク。
次ページ
や前ページ
といったリンクが多い。ページといった要素がない限りは使わない。
トピックパス(ブレッドクラムリスト)
やページネーション
は明確な必要性がない限りはあまり使用されません。
ここでは、グローバルナビゲーション、ローカルナビゲーションといったナビメニューとトピックパス(ブレッドクラムリスト)についてのみ解説します。
横並びナビメニュー
横並びのメニューを作成する場合の多くは、ULタグエレメントを使います。
必要な点は、li タグエレメントをdisplay: inline-block;
に指定することで、UL の縦リストを横並びに整形することです。
float: left; による横並びに変換する方法もあるのですが、この方法は個々の幅が調整し難いのでここではdisplay: inline-block;を使った方法を紹介しています。
nav ul li{ display: inline; }
上記ではリンクの下線を以下のようなスタイル設定で非表示にしてあります。
nav ul li a { text-decoration: none; }
トピックパス(ブレッドクラムリスト)
「webプログラムリファレンス >CSS > リストのスタイル」というように、現在のページがサイト内ではどの位置かをユーザに分かりやすくするためのメニューをトピックパスまたはブレッドクラムリストといいます。
&t;
を付加するために、::after と :last-child を利用します。
横並びナビメニューと同じように、li タグエレメントを「display: inline;」に指定することで、UL の縦リストを横並びに整形します。