[CSS]パンくずの実装はどのようにするのがよいかの考察

Post on:2010年11月11日

パンくずのマークアップの考察のきっかけ -ul要素で同列配置

そのチュートリアルのマークアップは、下記のようにul要素で実装されています。

HTML

<ul class="breadcrumb">
    <li><a href="#">第一階層</a></li>
    <li><a href="#">第二階層</a></li>
    <li><a href="#">第三階層</a></li>
    <li>現在位置</li>
</ul>

この記事に対して、次のコメントがつきました。

ul要素での同列配置は各アイテムが同じレベルの階層にあるように見えるため、そのHTMLはセマンティックではありません。
パンくずはそうではなく、各アイテムが親子の関係にあり、パスをあらわすものです。

パンくずのマークアップの考察 -ul要素で親子

ul要素で同列に配置するのは、意味的に間違っている感じがしたので、アイテム自身のレベルをあらわすために、以下のようなマークアップにしてみます。

HTML

<ul class="breadcrumb">
    <li>
      <a href="#">第一階層</a>
      <ul>
        <li>
          <a href="#">第二階層</a>
          <ul>
             <li>
               <a href="#">第三階層</a>
               <ul>
                  <li>
                     現在位置
                 </li>
               </ul>
            </li>
         </ul>
       </li>
     </ul>
  </li>
</ul>

このマークアップは、本当に必要でしょうか？
問題点はul要素自体にあると考え、ol要素でマークアップをしてみます。

パンくずのマークアップの考察 -ol要素で順序づけ

HTML

<ol class="breadcrumb">
        <li><a href="#">第一階層</a></li>
        <li><a href="#">第二階層</a></li>
        <li><a href="#">第三階層</a></li>
        <li>現在位置</li>
</ol>

これは、少しすっきりした感じがします。
パンくずを順序づけし、ol要素でマークアップすることは適切に思われます。しかし、これでも満足はえられません。1, 2, 3というリストは、レベルの階層をあらわすものではありません。
次に、各階層を区切るセパレーターを使用してみます。

パンくずのマークアップの考察 -セパレーターの使用

HTML

<p class="breadcrumb">
  <a href="#">第一階層</a> >
  <a href="#">第二階層</a> >
  <a href="#">第三階層</a> >
  現在位置
</p>

これはCSSでのスタイリングが無い状態で、最も効果的です。「>」のセパレーターは階層を視覚的にうまくあらわしています。
インラインの要素を使うことはパンくずを水平レイアウトに表示します。しかし、セマンティックであるかということでは、ひどく満足できないものとなっています。

私がもしGoogleにアドバイスできるなら、このことを伝えるでしょう。しかし、Googleは検索結果のパンくず表示にこれを使用しています。

実際のHTMLを見てみると予想通り、非常に乱雑なマークアップだと思うことでしょう。しかしながら、パンくずのこのマークアップは何かしら得るものがあるかもしれません。

[ad#ad-2]

パンくずのマークアップの考察 -Googleを参考に

GoogleではパンくずにHTML5のマイクロデータを使用することを推奨しています。
実装例を見てみましょう。

HTML

<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>

パンくずリスト - ウェブマスターツールヘルプ

一見すると、できの悪いマークアップに見えますが、実際にはそれぞれを意味付けするHTML5のマイクロデータを使用したセマンティックなマークアップとなっています。
div要素をラッパーにし、「breadbrumb」などとclassを使用するだけで簡単に利用ができるでしょう。

パンくずのマークアップの考察 -HTML5の使用

また、HTML5では他のマークアップ方法もあります。

HTML

<nav>
 <p>
  <a href="/" rel="index up up up">第一階層</a> >
  <a href="/products/" rel="up up">第二階層</a> >
  <a href="/products/dishwashers/" rel="up">第三階層</a> >
  <a>現在位置</a>
 </p>
</nav>

「Link type "up"」を使用することで、rel属性にその階層の関係を明示することができます。

ここで、nav要素を使用することは非常に適切です。今まで紹介したコードのいずれの例に使用してもセマンティックな恩恵を受けるでしょう。
そして、今まで紹介した中でパンくずの実装として、一番満足がいくものだと思いました。rel属性はエレメント間の関係を記述するもので、それはとても相性のよいものです。またデザイン面においても、簡単にどんなスタイルでも適用できるものでしょう。