パンくずリンク|パンくずリスト(breadcrumb navigation)はどうコーディングするのが今風なんだろう。
ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。

パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、
よくあるデザインパターンは次の通りである。

  1. 1行テキスト
    テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。

    1. ページタイトルを > で繋いだもの
    2. ページタイトルを > 以外の文字で繋いだもの
  2. シンプルなリンクの羅列
    区切り文字を入れずに画像やCSSで階層を表現する。
  3. マルチステップ
    開始から完了までの行程を表示する。
  4. サブナビゲーションつき
    各ページリンクに属するページをマウスオーバーで表示する。
  5. インタラクティブなアクションつき
    deliciousのパンくずリンクは階層表示とタグの絞込みを兼ねている
  6. 実験的なもの
    Booreilandはナビゲーションがパンくずリンクっぽい。

割合についてはWeb Design PracticesのBreadcrumb Navigationという記事が参考になるかも。
圧倒的に水平+右矢印のデザインが多い。

デザインとソースの見本19選

Delicious

親タグ:リスト(UL)
セパレーター:なし

リストによる階層構造。
タグが増えた場合は最初のタグが入ったリストにfirstというクラスが付与される。

delicious breadcrumb

Google

親タグ:段落(P)
セパレーター:>

Google breadcrumb

NASA

親タグ:リスト(UL)
セパレーター: >

NASA breadcrumb

Jakob Nielsen

親タグ:small
セパレーター: 画像

ルートにstrongが使われている。

Jakob Nielsen breadcrumb

Apple

親タグ:リスト(OL)
セパレーター: なし(CSS)

Apple breadcrumb

MSDN

親タグ:DIV
セパレーター: 画像

縦型。ナビゲーションを兼ねている。

MSDN breadcrumb

A List A Part

親タグ:h1
セパレーター: コロン

カテゴリータイトルを兼ねる。記事ページには表示されない。

Alist Apart breadcrumb

Adobe

親タグ:リスト(OL)
セパレーター: なし(擬似要素でスラッシュ)

Adobe breadcrumb

Yahoo

親タグ:h2
セパレーター: >

Yahoo!(jp) breadcrumb

goo

親タグ:リスト(UL)
セパレーター: >

goo breadcrumb

SquareEnix

親タグ:DIV
セパレーター: ハイフン

square-enix breadcrumb

Amazon

親タグ:h1
セパレーター: >

amazon breadcrumb

DELL

親タグ:DIV
セパレーター: >

DELL(日本) breadcrumb

SONY (store)

親タグ:DIV
セパレーター: >

sony breadcrumb

東芝

親タグ:DIV, P
セパレーター: >

toshiba breadcrumb

SHARP

親タグ:DIV, P
セパレーター: >

東芝と似てる。idがPANKUZUだったのはSHARPだけ

sharp breadcrumb

4travel

親タグ:DIV, P
セパレーター: >

後述するGoogleの構造化マークアップ(RDFa)を使っている。

4travel breadcrumb

Lonely Planet

親タグ:リスト(UL)
セパレーター: なし(CSS)

マウスオーバーしたときにAjaxで作成されたサブナビゲーションを表示する。

Lonely Planet

Wowhead

親タグ:DIV, P
セパレーター: なし(CSS)

ナビゲーションが全てAjaxで作成されている。

wowhead breadcrumb

マークアップに関する考察

パンくずリスト(ブレッドクラム)とは

Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。すべてのページの同じ場所にパンくずリストを掲載することにより、サイトの訪問者が現在位置を直感的に理解する役に立つ。

「topic path」(トピックパス)という名称も使われることがある。

ユーザビリティの第一人者Jakob Nielsen氏曰く翻訳版)、

パンくずは、ほとんどいつも同じ形式で実装される。横一列にテキストを並べて…

  • 最上位の階層から下の階層へ、一階層ずつの遷移を示す
  • 始まりはホームページ、終わりは現在表示されているページになる
  • テキストが各階層へのリンクになっている(表示中のページは除く。クリックしても状況に変化をもたらすことのないリンクはあるべきではない)
  • 単純な記号ひとつ(“>”が使われる場合が多い)で階層と階層とを区切る

この一貫性のおかげで、ユーザは見ればすぐにパンくずリストと理解し、使い方まで分かってしまう。一貫性が親しみを生み、予測をしやすくしてくれる。結果として、ユーザビリティが育まれるのだ。ただし、パンくずをデザインするときには、慣習に従わなければならない という意味でもある。

コーディングするときに従うべき慣習というものは無いが、ページリンクにブロック要素やリスト要素を使うかどうかで一つ大きな違いが生まれる。
親がブロック要素で中身が全部インライン要素のマークアップだとCSSが切れても横一列にテキストが並ぶが、子にブロック要素やリスト要素を使った場合はCSSが切れると垂直に並んでしまう。
普通に見ている時にいきなりCSSが外れるなんていうことはまずないけど、縦並びになった時点で慣習から外れてしまうからちょっと気になる。
それとリストには順序が定義されるもの(OL)とされないもの(UL)があるのだが、
始まりがホームページで最後が現在見ているページという明確な順序があるのなら、ULよりOLを使う方が妥当に思える。

パンくずリストは div か p か li だよねと思っていたのでA List A PartやAmazonがh1使ってたときには驚いたのだけど、
カテゴリータイトル代わりにしてしまうコーディングはブログにもってこいだと思った。

SEOに関してはGoogleのウェブマスターセントラルにあるリッチ スニペットと構造化マークアップというカテゴリにあるパンくずリストについての記事が参考になる。
以下のマークアップを行えばGoogle ではパンくず情報を識別し、その情報を基にページの情報を認識して、検索結果に表示できる。とのことなので
まだ試験運用中であるものの、既に使っているサイトもあったりするので覚えておいて損はない。

microdataの場合

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">洋服</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">ドレス</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">緑のドレス</span>
  </a>
</div>

RDFaの場合

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/dresses" rel="v:url" property="v:title">
      洋服
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">
      ドレス
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">
      緑のドレス
    </a> ›
   </span>
</div>

要はアンカーにurl、リンクテキストにtitleというプロパティをつけろってことです。
クラスを使って簡略化すると次のようになる。

<div class="breadcrumb">
     <a href="http://www.example.com/dresses" class="url">
      <span class="title">洋服</span>
    </a> ›
    <a href="http://www.example.com/dresses/real" class="url">
      <span class="title">ドレス</span>
    </a> ›
    <a href="http://www.example.com/dresses/real/green" class="url">
      <span class="title">緑のドレス</span>
    </a> ›
</div>

1つのページに複数パンくずリストが存在する場合にはchildプロパティを使うのだが、
これは実にパンくずリストの趣旨に沿ったマークアップだと思う。

<div class="breadcrumb">
     <a href="http://www.example.com/dresses" class="url">
      <span class="title">洋服</span>
    </a> ›
    <div class="child">
        <a href="http://www.example.com/dresses/real" class="url">
          <span class="title">ドレス</span>
        </a> ›
        <div class="child">
            <a href="http://www.example.com/dresses/real/green" class="url">
              <span class="title">緑のドレス</span>
            </a> ›
        </div>
    </div>
</div>

後々対応することを見据えてこういうマークアップをしておけば対応しやすい。

スタイリングに関してJakob Nielsen氏はテキストを一列に並べてリンクを張るだけで、キレイに飾る必要はない。と断言しているんだけど、
上記慣習に沿ったパンくずリストになるのなら自由にスタイリングすればいいと私は思っている。
最近はJavaScriptが使いやすくなったので、サイトの構造が複雑ならマウスオーバーでサブナビゲーションを表示するのもアリだと思う。

毎回同じようなスタイリングとコーディングをするのが面倒だから、パンくずリストのCSSを書いてみたのだけども
スタイリングするに当たって汎用性が高かったのはセパレータをspanに入れたものでした。
それはなぜかと言うと、IE用のハックがしやすいです。

<ol class="breadcrumb">
    <li>
      <a href="http://www.example.com/dresses" class="url">
        <span class="title">洋服</span>
      </a>
      <span class="separator">&gt;</span>
    </li>  
    <li>
      <a href="http://www.example.com/dresses/real" class="url">
        <span class="title">ドレス</span>
      </a>
      <span class="separator">&gt;</span>
    </li>  
    <li>
      <a href="http://www.example.com/clothes/dresses/real/green" class="url">
        <span class="title">緑のドレス</span>
      </a>
      <span class="separator">&gt;</span>
    </li>
</ol>

Jakob Nielsen氏のサイトみたいにルートにstrongでカレントにemというのもアリかな?

<div class="breadcrumb">
    <strong class="root">
      <a href="http://www.example.com/dresses" class="url">
        <span class="title">洋服</span>
      </a>
      <span class="separator">&gt;</span>
    </strong>  
    <span class="path">
      <a href="http://www.example.com/dresses/real" class="url">
        <span class="title">ドレス</span>
      </a>
      <span class="separator">&gt;</span>
    </span>  
    <em class="current">
      <a href="http://www.example.com/clothes/dresses/real/green" class="url">
        <span class="title">緑のドレス</span>
      </a>
      <span class="separator">&gt;</span>
    </em>
</div>