You Are Here の実装方法

September 08, 2006category: CSS

メニューを ul 要素と CSS で実装し、メニュー内のアイテムで、現在表示中のものをハイライトさせる際、パターン化された方法として 2 つ挙げられる。

一方は、li 要素の class に here 等を明示的に指定する方法 (here 法)。もう一方は、body 要素にコンテンツ名の class または id を指定する方法 (trigger 法) だ。個人的には後者を推している。理由は追って説明する。

では、具体的にそれぞれの実装方法を見ていこう。

here 法

ハイライトさせるアイテムの class に here 等を指定し、CSS でデザインを定義する。一例としては、Digital Web Magazine が挙げられる。

HTML
<ul id="menu">
  <li>Hoge</li>
  <li class="here">Foo</li>
  <li>Bar</li>
</ul>

CSS
ul#menu li {
  background-color: #ff0;
}

ul#menu li.here {
  background-color: #0ff;
}

here 法の利点は、マークアップが直感的になることに尽きる。

trigger 法

body 要素 (またはその他の梱包要素) の class や id にトリガーとなる値を指定し、CSS には、li 要素のそれと一致した場合にデザインが切り変わるように記述する。こちらは A List Apart が採用している。

HTML
<body class="foo">
  <ul id="menu">
    <li class="hoge">Hoge</li>
    <li class="foo">Foo</li>
    <li class="bar">Bar</li>
  </ul>
</body>

CSS
ul#menu li {
  background-color: #ff0;
}

body.hoge ul#menu li.hoge,
body.foo ul#menu li.foo,
body.bar ul#menu li.bar {
  background-color: #0ff;
}

どちらの方法を用いても表示上は相違無いが、拡張性に違いがある。僕が後者を薦める理由は、同様のコンセプトで、メニュー以外の要素に対してもデザインを切り替えることが容易になるからだ。

tirgger 法については Web Standards Solutions の "Styling <body>" 節が詳しい。

The <body> element is at the top level, the id contained within can be used to control any element below it on the page.

comments (0)