このワイヤーの特徴
パンくずの高さが、いつも1行で済む
折り返さないため、階層が深いページでもパンくずは1行のままで、ページの見出しや最初の画面の内容が下へ押し出されません。
階層を省かずに、全部残せる
途中の階層も画面の中に残っているので、読み手は左へスクロールするだけで、上の分類へたどれます。
今のページと親が、最初から見える
表示したときに右端までスクロールしておくため、読み手がまず知りたい今のページと1つ上の一覧が、最初の画面に入ります。
制作時のよくある失敗
左端から表示している
スクロールの位置を変えないと、最初に見えるのはホームと上の階層だけで、今のページが画面の外に隠れます。
表示したときに右端まで送っておきます。
続きがあることが分からない
端で文字が途切れているだけだと、スクロールできることに気づかれません。
端を薄くぼかすか、文字の途中で切れるように幅を決めて、続きがあることを示します。
スクロールの枠がキーボードで動かせない
スクロールする枠にフォーカスが当たらないと、キーボードの操作では隠れた階層を読めません。
枠を tabindex=”0″ にして、矢印キーで動かせるようにします。
よくある質問
PCでも横スクロールにしたほうがよいですか?
PCで1行に収まるなら、横一列のまま見せます。
横スクロールは、幅が足りないときだけ働くようにしておけば、PCとSPで同じ作りのまま使えます。
スクロールバーは表示したほうがよいですか?
細いスクロールバーを残すか、端をぼかして続きがあることを示します。
何も手がかりがないと、隠れた階層に気づかれないためです。
今のページの名前が長い場合はどうしますか?
今のページの名前は見出しで全文が読めるので、パンくずでは長い名前を短くした呼び方にしておくと、親のページと並べて見せやすくなります。
