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

リストとCSS

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

横並びナビメニュー

 横並びのメニューを作成する場合の多くは、ULタグエレメントを使います。 必要な点は、ULタグ「display: inline;」によってULの縦リストを横並びに整形することです。

#nav ul  {
	display: inline;
}

 上記ではリンクの下線を非表示にしてあります。

#nav ul li a {
	text-decoration: none;
}

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

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