黄色い正方形のコイツは中身もひと味違います
■『Webデザイン 明解ルールブック』（MdN編集部編、MdN Corporation、2002）
かなりインパクトのある帯ですね。僕もこの帯をみて思わずこの本を手に取ってしまいました。
無論、手に取っただけでは購入にはつながりません。当然、中身も見るわけですが、僕にはむしろ中身の方が帯よりも衝撃的でした。
「ルールブック」とあるので、たぶん HTML のお作法的な ― 今風にいえば「クロスブラウザ・アクセシビリティ」に重点を置いた内容なんだろうと思ってページをめくってみたのですが、この本…ちょっと毛色が違います。「クロスブラウザ」― つまり異なるWebブラウザ間で同じように見えることを志向している点では、ほかの本と変わらないものの、突っ込むポイントが実に細かい！たとえば、「段落最後の行間が広がるのは行末の半角スペースが原因！」とか。行末の半角スペースって、意識的に入れる人はいないと思いますが、コピー＆ペーストとかしている間に知らず知らずのうちについてしまうことがあるので意外に盲点です。（イエローカード２枚相当。本書では各項目の重要度をイエローカード１枚 ＜ イエローカード２枚 ＜ レッドカードというように段階表示してます。詳しくは上の帯の画像を参照。）
- 誤っている例 （※わかりやすいように半角スペースをアンダースコアで表示してます。）
<p>段落</p>_
- 正しい例
<p>段落</p>
また、ひとつの大きな画像を幾つかのパーツに分解して、それをテーブルを使って分散表示させるという比較的ポピュラーなテクニックがありますが、このテクニックを使ったページでセルとセルの間に不要なスペースができてしまうケースに当たったことはありませんか？これはHTMLソースの見やすさのために </td> の直前に入れられている改行が原因なのだそうです。（レッドカード相当。）
- 誤っている例
<td>
セル
</td>
- 正しい例
<td>セル</td>
こんなこと、普通のHTML辞典や入門書にはまず載ってませんよね。僕もこの本ではじめて知りました。厳密には W3C が推奨しているアクセシビリティ・ガイドラインとはちょっと路線が異なりますが、それを踏まえても知っておいて損はないテクニックが盛りだくさんです。関心のある方は、是非とも一度ご覧になっていただきたいのですが、なにぶんにも２年ほど前の本で、最近ではあまり店頭で見かけなくなってしまったのが残念なところ。（税込1,890円）