半年ほどちんたら更新してきた当ブログですが、前回の記事には意外にも反応があってびっくりしています。コメント本当にありがとうございます。

改めて前回の記事を見返してみて、「正しい」という表現が適当じゃなかったかもしれません。別段、定義リストを使ったコーディングにたいして、おまえは間違っていると糾弾するつもりはないんです。個人的に嫌だなと思うだけで。まぁ好みは色々あるでしょうし。

ここで前回「よろしくない」と例に挙げた新着ニュースリリース部分のコーディングを再度ご紹介。

<dl id="news">
<dt>2009.06.02</dt>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01</dt>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

制作の現場では複数人数でのコーディングが当たり前、客から突然仕様変更を言い渡されることも当たり前です。たとえば上記のコーディングで突然、ニュースのカテゴリもテキスト表示してくれとなった場合。ddをもう一つ追加するわけですが…

<dl id="news">
<dt>2009.06.02</dt>
<dd class="category">製品情報</dd>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01</dt>
<dd class="category">採用情報</dd>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

CSSには当然ddに対してスタイルが設定されているので、どちらかにクラス名を追加しなきゃならない。場合によっては両方につける羽目になり、CSSも一部書き直し…。それは嫌だからddの中にspanを挿入する？　システムが組みあがってからこういうマークアップ上の変更をするのは結構めんどくさいです。

と言うことを考えると、最初から出来るだけ細かく、各要素には意味のあるクラス名をつけておくのがよい、というわけです。CSSも見やすくなります。

#news dd {
・・・
}

と書かれていたのでは、いったい何に対してスタイルを設定しているのかCSSだけを見ても分かりませんが…（まぁなんとなく分かりますが）

#news .entry-title {
・・・
}

こちらの方がより、自分のあとにCSSを触る人に対しても親切です。

でも「意味のあるクラス名」の付け方にはどういう基準があるのか？　この基準がないと、class名を考えるのに無駄な時間を使ってしまい、かえって効率的ではなくなってしまいます。

そのヒントになりそうなのがMicroformatsというわけなのですが、徹夜の開発中なのでまた次回…

XHTMLのマークアップでどうしても許せないというか、気になるやり方をよく見かける。
企業サイトではトップページに最新ニュースの一覧が表示されていることがよくあるが、その部分がかなりの確率でこのように書かれている。

<dl id="news">
<dt>2009.06.02<dt>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01<dt>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

要は定義リストを使っているわけだが、これが「正しいコーディングである」と誰かが提唱しているのだろうか、ほんとによく見るんですが、定義リストの本来の意味からは大きく外れているのが気になるんです。

DTDではdl要素について「definition lists – dt for term, dd for its definition」と注釈があります。この文面通りに受け取れば、上記のコーディングは2006年6月1日についての解説がリンク先にあるということになってしまうが、もちろんそのようなことはないはず。

では、どのようにコーディングすればよいのか。僕がもう少しましだと思うのはこういうマークアップです。

<div id="news">
<span class="updated">2009.06.02</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
<span class="updated">2009.06.01</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
</div>

数字は更新日時のことで、文字部分はタイトルであるということが明白ですね。
でもまだ問題があります。どこからどこまでがひと固まりであるのかはっきりしません。
さらに修正してみましょう。

<div id="news">
<div class="entry">
<span class="updated">2009.06.02</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
</div>
<div class="entry">
<span class="updated">2009.06.01</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
</div>
</div>

最初のコーディングとだいぶ変わりましたね。そして、RSSやAtomのフィードのソースにかなり近づいたと思いませんか？　XHTMLはXMLでもあるので、同じXMLであるRSSと似ているというのは、個人的には「より正しいマークアップである」と思います。

さらにもうひと工夫すれば、機械的にもこの部分が新着記事であると理解できるようになります。そのうちMicroformatsという考え方についてご紹介したいと思ってます！