パンくずリストをどうやって実装するか-
コーディングする度にどの方法が最適なのかを考えてしまいます
どの方法を使えばよいか決定的な理由が見いだせず、”これ”と決めれずにいました
色々と調べてみていると、
せっかくHTML5で記述しとぅんやし、それを使ってみようかなーという気に
ということでやってみたのが以下
<nav>
<ol>
<li><a href="/" rel="index up up up">第一階層</a></li> >
<li><a href="/products/" rel="up up">第二階層</a></li> >
<li><a href="/products/dishwashers/" rel="up">第三階層</a></li> >
<li>現在位置</li>
</ol>
</nav>
rel属性は、リンク元からリンク先への位置づけを示します
その内、indexは索引文書を示します(と書いてました・笑)
つまりはindex.htmlを指すってことですね
upは自分から見てどれだけ上の階層かを示します
1階層上ならupは1つ、2階層上なら2つ、というように
これ以外に、Google先生はHTML5のマイクロデータを使うことを推奨しています
はて、マイクロデータ??
詳しくはココをチェックして下さい
マイクロデータとは、タグに意味付けを与えるものです
<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>
例えば上記のようなもの
いちばん外側のdivにあるitemtypeで一意的に意味付けをし、
itempropでタグにその中での意味を与えます
コチラ参照
・・・若干煩雑かな?
現状ではまだ非現実的かも
ということで、<nav>を使った最初の方法か、
もっと簡単に
<p><a href="/">ホーム</a> > <a href="#">第一階層</a> > <a href="#">第二階層</a> > 現在位置</p>
でも良いかも