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

リストとスタイル(ULとCSS)

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

横並びナビメニュー

 まずはULタグエレメントを使って、横並びのナビメニューを作成する。重要な点は、

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

です。「display: inline;」は、ULの縦リストを横並びに整形します。「text-decoration: none;」によってULリストのマーカーを非表示にします。

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

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