CSS HappyLifeの平澤隆氏がパンくずリストのマークアップを色々考えているが,いろいろなマークアップ方法があるんだねえ.
それはさておき,パンくずリストとは,サイトの階層構造をリンクのリストで示す方法である.パンくずリスト自体はあるサイト・ないサイトそれぞれ.マークアップの方法もパターンはそれほど多くないものの,それぞれ思い思いのソースを書いている.
で,しばらくパンくずリストのマークアップを考えていたけれど,dl/dt/dd要素で組むのがいい…,と思ったのだが,既に例として挙がっている.じゃあ,例との違いは何かを探してみる.
例では「dt要素をCSSで消す」とある.自分の場合は…と考えてみると「dt要素をあえてCSSで消さずに,dt・dd要素に必要なことを書く」方針を思いついた.
で,コードを書いてみる.
(X)HTML
<dl>
<dt>現在見ているページ:</dt>
<dd>
<a href="/">ホーム</a> /
<a href="/">全メーカーのバイク</a> /
<a href="/">ホンダのバイク</a> /
<a href="/">400cc以下のバイク</a> /
CBR400RR
</dd>
</dl>
なお(X)HTMLのコードは,上記の「パンくずリストのマークアップを色々考えてみる」からコピーし,文面の一部を書き直している.
CSS
dl dt {
float: left;
margin-right: 5px;
}
dl dd {
margin: 0px 0px 10px;
}
CSSのコード例は,各エントリ下にある「このページの情報」で使っているCSSのコードをそのまま使っている.これで問題ないかといわれると,うーん,何となく問題ありそうな感じがするけれど,気づいたときに直すということで.
個人的には,極力テキストを消さない方向でいくのがベストのような気がしている.デザインをしていると,日本語のテキストが邪魔に思えてくるときがあると思う.テキストを消すことは,メリット・デメリットそれぞれが存在するので,一概にいいか悪いかはそのときの状況によると思う.
ただ,そのテキストは何らかの理由によって書かれたと思われるので,「消すのはもったいない」というか,「もっとテキストを大事にしようぜ!」と個人的には思っている(何となく論点がずれた気がするが,それは問題が起きない限り気にしない).