txqz memo

BODY直下をDIVで揃えたい症候群

上のソースでは、liのリスト項目をulで「順序の無い箇条書き」と明示しているのに、それを更にdiv要素としてマークアップしています。ほとんどの要素に対してid属性やclass属性は付けることが出来ますので、これなら直接ul要素にidを付加させましょう。

確かにその通りだ。実際に私が今まで書いてきたHTML文書の中にもここで例示されているようなマークアップが何回か出てきていた。

なんとなく、BODYの直下にDIVとそれ以外が混ざるのが嫌だったんだと思った。もちろん文法上はそのような制限はない。ただ、なんとなくBODY直下にDIVが1つでも出てきたら全ての非DIV要素をDIVで包まないと落ち着かなかった。

例だと

<div id="navi">
 <ul>
  <li><a>About</a></li>
  <li><a>Profile</a></li>
  <li><a>Gallery</a></li>
  <li><a>Links</a></li>
 </ul>
</div>

よりも

<ul id="navi">
 <li><a>About</a></li>
 <li><a>Profile</a></li>
 <li><a>Gallery</a></li>
 <li><a>Links</a></li>
</ul>

の方が良いですよねという話だけど、ナビゲーションリストに先駆けて見出しを起きたいなら、むしろ

<div id="navi">
 <h2>ナビゲーション</h2>
 <ul>
  <li><a>About</a></li>
  <li><a>Profile</a></li>
  <li><a>Gallery</a></li>
  <li><a>Links</a></li>
 </ul>
</div>

というマークアップが適切になるような気もする。結局はその場その場で適切に判断することになる。

あと、はてなダイアリーのはてなモジュールを使うと

<div class="hatena-module">
<div class="hatena-moduletitle">最近のコメント</div>
<div class="hatena-modulebody">
<ul class="hatena-recentcomment">
<li><a href="/denken/20070610/1181474055#c1182612946">2007-06-10</a>&nbsp;</li>

<li><a href="/denken/20070401/1175391705#c1175397175">2007-04-01</a>&nbsp;kiwofusi</li>
<li><a href="/denken/20070329/1175125902#c1175158985">2007-03-29</a>&nbsp;harukonbu</li>
<li><a href="/denken/20070329/1175125902#c1175156359">2007-03-29</a>&nbsp;umekoumeda</li>
<li><a href="/denken/20070321/1174441534#c1174447026">2007-03-21</a>&nbsp;umekoumeda</li>
</ul>
</div>
</div>

などのようなHTMLが出力されるが、これはDIV厨めいている。モジュールのスタイリングを一律にするためにhatena-modulebodyというクラスのDIV要素がUL要素をラップするようになっているが、厳密には不必要なDIV要素のはず。hatena-moduletitleについてはさらにひどいが、これはどの見出し要素を使うべきかは文章全体を見ないと決定できないために仕方なくやっているのかな。XHTML2.0のh要素が楽しみですね。