簡潔なパン屑リスト

2014/08/06

一番単純な記述

構造的HTMにこだわらなければ下のようなコードで記述できる。

<p class="topicpath">
  <a href="#">Top Level</a> >
  <a href="#">Second Level</a> >
  <a href="#">Third Level</a> >
  Current Item
</p>

http://css-tricks.com/markup-for-breadcrumbs/
短いコードですむし、ブラウザ対応から言っても確実ではある。

sample1

olリストを使う

見栄えについては考えず、構造的記述でかつ簡潔で汎用性のあるコードにするにはどうしたらよいか考えてみる。やはりolリストを使うのが本手かなと思う。見栄えについて言い出せばすばらしいサンプルがいくらでも見つかるだろう。

olリストとして記述することとし、これを横並びにするにはfloat属性を使う手があるが、クリアするのにひと手間掛るので、とりあえず display:inline;を使うことにする。見栄えを優先すれば float の方が細かく設定できそうだが...

項目間の > をどう記述するかであるが、下のコードはHTMLに > をそのまま記述する方法である。ちょっと稚拙かなとも思うがブラウザ対応性は高いと思う。

<ol id="topicpath">
  <li><a href="#">Top Level</a> > </li>
  <li><a href="#">Second Level</a> > </li>
  <li><a href="#">Third Level</a> > </li>
  <li>Current Item</li>
</ol>

ol#topicpath {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ol#topicpath li {
  display: inline;
}

sample2

疑似要素を使う

下のようにHTMLに > を記述しなければ、構造文として非常にすっきりする。

<ol id="topicpath">
  <li><a href="#">Top Level</a></li>
  <li><a href="#">Second Level</a></li>
  <li><a href="#">Third Level</a></li>
  <li>Current Item</li>
</ol>

これだけのHTMLで項目間に > を入れるのを実現するにはCSSの :after または :before 疑似要素を使う手がある。これは指定した要素の後ろまたは前にテキストや画像などのコンテンツを追加するものである。

ここでは " > " が <li> 要素に後置または前置されるコンテンツである。ただし、:after の場合最後の項目の後ろにコンテンツ( > )は不要であり、同様に:before の場合最初の項目の前にコンテンツは不要である。

そこで、さらに :last-child もしくは :first-child 疑似要素を使って、最後の要素または最初の要素だけを指定し、コンテンツを空にすればよい。

:after を使うか :before を使うかであるが、どうやら :last-child は CSS3、:first-child は CSS2.1 からサポートされているらしいので、ここでは :before 疑似要素を使うことにする。最低限必要なCSSは下のようになる。

ol#topicpath {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ol#topicpath li {
  display: inline;
}
ol#topicpath li:before {
  content:" > ";
}
ol#topicpath li:first-child:before {
  content:"";   /*最初の要素に > は要らないのでヌルにする*/
                      /*もしくは content:none;*/
}

これで最初の<li>要素を除いてテキストの前に > が表示されるようになる。

sample3

jQueryを使う

最後のリスト項目とか最初のリスト項目とかといった、ちょっと面倒なことを配慮したCSSになってしまった。そこで、このあたりをjQueryを使ってみることにする。HTMLとCSSを再掲すると下のようになり、グンとシンプルなものに戻る。

<ol id="topicpath">
  <li><a href="#">Top Level</a></li>
  <li><a href="#">Second Level</a></li>
  <li><a href="#">Third Level</a></li>
  <li>Current Item</li>
</ol>

ol#topicpath {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ol#topicpath li {
  display: inline;
}

項目間の > は jquery の append もしくは prepend を使う。append や prepend は指定した要素内の最後または最初に任意のHTMLを加える関数である。

<script type = "text/javascript">
  $(function(){
    $("ol#topicpath li:not(:first-child)").prepend("<span> &gt; </span>");
  });
</script>

随分すっきりしたと思う。ただしどこまでブラウザ対応性があるかはっきりは確認できていない。

sample4