今、訳あって普段の業務とは関係のない、あるウェブサイトを作成している。自分はWebデザイナじゃないので見た目はウンコでもいいらしいのだが、WebプログラマとしてはHTMLを正しくマークアップしないとダメだろ、という俺制約を勝手に課している。
で、パンくずリストなんだけどolかulか。
ホーム > 事業内容 > システム開発
のようなページの階層を示すリストは、多くのサイトは ul タグでマークアップされているようだ。しかし、これ階層を示しているので順序にも意味あるのだから ul じゃなくて、ol でマークアップするのが正しい気がするのだが、どうなんだろうか?
HTMLは
<ol class="hierarchy"> <li>ホーム</li> <li>事業内容</li> <li>システム開発</li> </ol>
CSSはこんなふうにしている。
ol.hierarchy { list-style-type: none; } ol.hierarchy li { display: inline; } ol.hierarchy > li:before { content: "\25B6\0020"; } ol.hierarchy > li:first-child:before { content: none; }
「ホーム ▶ 事業内容 ▶ システム開発」って表示される。IEをガン無視するとCSS書くのも楽しいもんだね。