弊社ナチュラロジーのウェブサイト内でも使用していますが、よくサイトの中で「HOME > カテゴリ > コンテンツ」といった感じでホームページ（トップページ）から現在のページまでの道筋を示すナビゲーションを見かけることがあると思います。これはグリム童話のエピソードにちなんで「パンくずリスト」と言います。英語では「topic path」とか、そのまんま「breadcrumbs（パンくず） list」などと呼びます。
このナビゲーションはユーザビリティという観点から重要な要素で、特に大規模なサイトや、ディレクトリなどの階層が多いサイトにおいて、見る側が「今どこにいるのか」を知るために大きな役割を果たすのです。
まぁ弊社のサイトに関しては、そんなに深い階層もなくシンプルなわけで、そこまで重要なのかは疑問ですがｗ
で、本題です。
今回はこの「パンくずリスト」に関して、「どのように記述するのがhtml的に適切なのでしょうか？」というご質問を頂いたので、ぜひお答えしたいと思います。
考えられる方法として、
1. ulをdisplay:inlineまたはfloatさせたリスト
2. 「順番」という観点からolリスト
3. 単にpタグで囲む
の3パターンがあります。これにはいろいろと議論があるのですが、個人的には「どれもあり」だと思ってます。
ただ、ulやolのリストでdisplay:inlineやfloatを使うと、どうしてもIEなどでの挙動が不安定になりがちで、無駄にcssで制御する必要が出てきたり、バグ回避のためにhtmlでのインデントをなくしたりする必要があったりして、「美しいソース」を目指すことが難しくなります。
というわけで、最近ではpタグを使用するのが一番スマートなのではないかと考えています。
|