我的春秋: パンくずリストのマークアップ

ちょっと前に パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種（CSS HappyLife）というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は（も？）(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。（気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。） 階層型構造（tree structure） ［2006-02-11 追記］ 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが

[jintrick]

色々やったがHTML4.01ならそのまま書いてdiv[@class='topic-path']などとするのがベスト / XHTML2.0以外、「階層を」意味付けしようとすること自体まちがい

[nshash]

実装側の悩みとして、階層型構造は複雑な装飾が難しいんですよね。現にapple.comのパンくずリストは階層型リストなのに、リニアな順序付きリストでマークアップしてますし。そんな私も妥協したこと数回。

[leva]

実装側の悩みとして、階層型構造は複雑な装飾が難しいんですよね。現にapple.comのパンくずリストは階層型リストなのに、リニアな順序付きリストでマークアップしてますし。そんな私も妥協したこと数回。

[webmarksjp]

html

[wablog]

「肝心のシニア層はパンくずリストをほとんど使わない」

[harupiyo]

階層構造型、リニア構造型、視覚障害者向け等について考察されている

[the-day]

パンくず

[myrmecoleon]

nlって知らなかった。次世代かあ。

[harumomo2006]

パンくずリストが必要な人はパンくずリストの存在すら気付かない罠

[Aoba]

パンくずリストってbreadcrumbsって言うの？言うの？

[YasSo]

TopicPath

[Fsiki]

@media screen, print { p.breadcrumbs span { display: none; } }を本当に音声ブラウザがスルーするか確認の必要あり。仕様的にはOKだけど、実装されているかどうかが問題。

[hxxk]

http://css-happylife.com/log/css-template/visual/000106.shtmlへのコメントを踏まえて、より良い案を提示。この姿勢は見習いたい。

[saladdays]

パンくずリストの構造化

[lomo_lomo]

サイト構造やサイトの目的に応じた(X)HTML マークアップの例

[wacky]

サイト構造やサイトの目的に応じたパンくずリストのマークアップ案。階層型構造、リニア型構造、視聴覚障害者向け。