目次
はじめに
目的
本ドキュメントは、パンくずリスト（breadcrumb）のデザインと実装を、実務にそのまま使える形でまとめたものです。コピペ可能なCSS例や見た目のパターン、UXやSEOに配慮したポイントを具体的に示します。
対象読者
Webデザイナーやフロントエンドエンジニアを主な対象とします。HTMLとCSSの基礎知識があれば、すぐに試せる内容にしています。初心者の方も、例を追いながら理解できるよう配慮しました。
本書で得られること
- 実用的なマークアップとCSSの例
- おしゃれで使いやすいデザインパターン
- アクセシビリティやSEOを損なわない見せ方のコツ
具体例を多めにして、実装の手間を減らします。
前提と注意点
動作は主にモダンブラウザを想定します。シンプルさを重視するため、JavaScriptを最小限に抑えた実装を中心に扱います。プロジェクト固有の要件がある場合は、ここで示すパターンを基に調整してください。
2. パンくずリストとは何か？「役割」と「前提」をおさらい
概要
パンくずリストは、Webサイト内の階層構造と現在位置を示すナビゲーション要素です。ユーザーは現在のページがサイトのどの部分にあるか一目で把握できます。
基本構造（例）
ホーム > カテゴリ > サブカテゴリ > 記事
上記のように、上位ページから現在ページへ順に並べ、区切り記号（>、/ など）でつなぎます。
役割
- 現在位置の可視化：迷わずに今どこにいるか分かります。
- 上位階層への導線：ワンクリックでカテゴリやトップに戻れます。
- 探索の助け：関連する上位ページへ遡って別の情報を見つけやすくします。
- SEO効果の補助：構造が明確だと検索エンジンの理解に寄与する場合があります。
使用の前提
- サイトに明確な階層構造があることが前提です。単一ページやフラットな構成では不要な場合が多いです。
- メインナビゲーションと重複しないように配慮してください。
デザイン上の注意点
- 視認性を保ちつつ、主役のコンテンツを邪魔しないデザインにします。
- 区切り記号やリンクの見た目で誤解が生じないようにします（例えば区切り記号をクリック可能に見せない）。
- スマホでは文字数を短くしたり折り返しを考えたりして扱います。
3. パンくずリストの基本マークアップとCSSの土台
HTMLの基本構造
パンくずはセマンティックな要素で囲み、支援技術に伝えます。
