パンくずリスト

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[階層]

上から順に。例：ホーム › サービス › 料金プラン

[サイトURL]

構造化データ用。例：https://example.com

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはSEOとアクセシビリティに詳しいフロントエンドエンジニアです。
以下の条件で「パンくずリスト」を実装してください。

## 表示内容
- 階層：[階層]
- 最後の項目（現在のページ）はリンクにしない

## デザイン
- 項目を横1行に並べる。文字 13px、line-height 1.6
- リンク：色 #5F6D84。hover で文字色 #1463F0 と下線
- 現在のページ：色 #1B2A44、font-weight 700
- 区切り：右向きの山かっこ（›）を、項目の間に 8px ずつあけて置く。色 #B8C5D9
- 最初の「ホーム」は、家のアイコン（14px）＋文字にする
- 上下の余白 16px

## スマホ
- 折り返さず、横スクロールにする（スクロールバーは隠す）
- 最初から現在のページ（右端）が見える位置までスクロールしておく
- 各リンクのタップ領域は、上下に余白を足して高さ 44px 以上にする

## 実装方法
- 区切りの記号は CSS の疑似要素（::before）で描き、HTMLには書かない
- 項目はデータ（配列）から生成する
- 項目名が長い場合は、1項目あたり全角16文字ほどで末尾を省略（…）する。現在のページは省略しない

## 構造化データ
- schema.org の BreadcrumbList を JSON-LD で出力する（URLは [サイトURL] を先頭に付けた絶対URL）
- 画面に表示している階層と、JSON-LD の内容を同じデータから生成する

## アクセシビリティ
- nav 要素に aria-label="パンくずリスト" を付け、ol / li でマークアップする
- 現在のページには aria-current="page"
- 区切りの記号とアイコンは、スクリーンリーダーに読み上げられないようにする

## 出力形式
- [使用技術]のコードを1つ出力
- 置く場所（ヘッダーの直下、ページ見出しの上）についての補足を最後に1〜2文で書く