パンくずリストのマークアップを色々考えてみる

06月16日（土）00:05

category: (X)HTML

久々普通のエントリーだ。

なんか、デジパの中の人が、Web標準の日々に出ちゃうらしいです。
この人→ネットのサラダボウル: Web標準の日々に参加します。

皆色々やってるなぁ～、ボクも負けてられんなぁ～

ソレとは関係ないけど、デジパの社員は半分くらいの人がブログ書いてるんすけど、Ｂ to Ａ　赤坂で働くWebコンサルタントの日記とかのエントリーで逆立ちって。。。。

皆色々やってるなぁ～、ボクも負けてられんなぁ～

さて、そろそろ本題に。
以前のエントリーでパンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種ってのを書いたんだけど、その後色んなサイトで書かれてたパンくずリストのエントリーや、コーディングコンテストのソース覗いてたりして、今後どうやってマークアップしてこうかなぁ～って悩んでた今日この頃。

そんな訳で、良いか悪いかは別として色々考えてみた。

---- こっから続き

ul要素でやってみる

<ul>
   <li><a href="/">ホーム</a></li>
   <li><a href="/">全メーカーのバイク</a></li>
   <li><a href="/">ホンダ</a></li>
   <li><a href="/">400cc以下</a></li>
   <li>CBR400RR</li>
</ul>

結構前に良く使ってたやり方。

ol要素でやってみる

<ol>
   <li><a href="/">ホーム</a></li>
   <li><a href="/">全メーカーのバイク</a></li>
   <li><a href="/">ホンダ</a></li>
   <li><a href="/">400cc以下</a></li>
   <li>CBR400RR</li>
</ol>

以前のパンくずリストのサンプルエントリー後、ちょっと使ってた。

p要素でやってみる

<p>
   <a href="/">ホーム</a> &gt;
   <a href="/">全メーカーのバイク</a> &gt;
   <a href="/">ホンダ</a> &gt;
   <a href="/">400cc以下</a> &gt;
   CBR400RR
</p>

コレは比較的最近使っているような、そうでもないような。
>を画像にしてaltに「の中の」ってのもコレと同じことにしておいてください。
画像用意するのが面倒だった。

p要素でやってみる 2.0

<p>
現在表示している「CBR400RR」のページまでは、
<a href="/">ホーム</a>から
<a href="/">全メーカーのバイク</a>に移動し、
次に<a href="/">ホンダ</a>に移動し、
次に<a href="/">400cc以下</a>に移動し、
最後に「CBR400RR」と移動することで表示されます。
</p>

コレは試したことないな～、spanタグとか増やしまくって消したりなんだかんだしないと上手く見せれないから大変そうだ。分かりやすさとしては抜群だけど、しつこい感じもする。

div要素でやってみる

<div>
   <a href="/">ホーム</a> &gt;
   <a href="/">全メーカーのバイク</a> &gt;
   <a href="/">ホンダ</a> &gt;
   <a href="/">400cc以下</a> &gt;
   CBR400RR
</div>

div要素でやるのは、あんまり気がのらない。

dl要素でやってみる

<dl>
   <dt>現在表示しているページ</dt>
   <dd>
      <a href="/">ホーム</a> &gt;
      <a href="/">全メーカーのバイク</a> &gt;
      <a href="/">ホンダ</a> &gt;
      <a href="/">400cc以下</a> &gt;
      CBR400RR
   </dd>
</dl>

個人的に熱いのがコレ。dtはCSSで消す感じで。

ul要素を激しく入れ子ってやってみる

<ul>
   <li><a href="/">ホーム</a>
      <ul>
         <li><a href="/">全メーカーのバイク</a>
            <ul>
               <li><a href="/">ホンダ</a>
                  <ul>
                     <li><a href="/">400cc以下</a>
                        <ul>
                           <li>CBR400RR</li>
                        </ul>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

パンくずリストのためにココまでやるのって、個人的には疑問。ソースがすげー長いっていう罠も。

今回のサンプル全部

http://css-happylife.com/template/13/

個人的に有力なのが、dl要素な今日この頃ですが、明日には違うことを考えているかも知れないなぁ～。

パンくずリストっていえば、MT使った案件でサブカテゴリーとかあって、それのパンくずリストを作るのに悩んでました...
よくお世話になっている小粋空間さんとかでパンくずリストの作成方法みたいなのを読んでて、php化しないと現在のページでリンクが切れないとかあって、ちょっと凹んだんです。
んで、まぁしれっと突っ込まれるまで放置してればいいか。とかも考えてたんすけど、もう一踏ん張りしてみた。

その結果、以下のようにやれば解決するっぽいので良かった良かった。っていうメモ。

<p>
<a href="/">ホーム</a> &gt;
<a href="/hoge/"><$MTBlogName$></a> &gt;
<MTHasNoParentCategory>
<$MTCategoryLabel$>
</MTHasNoParentCategory>
<MTHasParentCategory>
<MTTopLevelParent>
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> &gt;
</MTTopLevelParent>
<$MTCategoryLabel$>
</MTHasParentCategory>
</p>

もう一階層深いと対応できない訳ですが...
今回はコレで解決したんでOKOK。

各種SBMに追加