CSSによる"パンくずリスト"のデザイン

CSSによるシンプルな "パンくずリスト" のデザイン例。

デモページを表示

CSS

補足

• Flexbox を使用してリスト項目を横並びにする。
• リスト項目の後ろ（最後の項目以外）に、疑似要素で ">" を表示している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ul 要素にクラス（"topic-path"）を付ける。