小林 信次
マークアップ・エンジニア

茨城県出身。1980年生まれ。専修大学経営学部卒業後，1年弱のニート生活を経て販売代理店の営業職を経験後，有限会社アイエイトワンに入社。主に，Webディレクション，マークアップを務める傍ら，講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則，これだけ。」（共著，MdN発行）がある。

　いつも良質なエントリでブックマークをたくさんもらっている「ウノウラボ Unoh Labs」というサイトがあります。少し前になりますが，そこで「CSSによるデザインワークと相性のよいHTMLって？」というエントリがありました。そこにはすでにたくさんのことが書かれていますが，今回は僕が実践していることを紹介します。

　と，その前に，「CSSによるデザインワークと相性のよいHTML」についてちょっと説明しておきましょう。サイト作成の案件を進めていく過程では，「やっぱりこういう風にできないかな？」というデザイン変更に関するクライアントからの要望は必ずと言って良いほど出てきます。そんなとき，「CSSによるデザインワークと相性のよいHTML」でサイトを作成しておけば，CSSファイルにほんの数行の記述をするだけで対応できるケースがよくあります。

　「Web標準」という概念には「文書構造と表現の分離」というキーワードが必ずと言って良いほど付いてきます。「マークアップを行う人がちょっと配慮してくれていたらできたのに…」ということが無いように，できる限り「CSSによるデザインワークと相性のよいHTML」を目指したいものです。

クラス属性に関する提案

　まずはウノウラボ「CSSによるデザインワークと相性のよいHTMLって？」の内容の概略から紹介しましょう。

• ID，クラスを適切に割り振って，要素がCSS側から一意に特定できる状態を作る （要素の役割に応じてID・クラスを適切に付けようね，ということですね）
• 同じような役割を持つ部分には同じクラスを割り振る （IDだけを振っておしまいにせず，同じような役割の要素にはクラスも設定しておきましょう，ということです）
• tableのtrごとに「odd」「even」を割り振る （1行おきに背景色を変えるなどのことができるようにするためです）
• リスト系要素（ul，ol，dl)の最初と最後が特定できるようにしておく （最初だけ余白を大きくしたいなど，何かと必要になることが多いためです）
• h1〜h6タグ直下には<span>か<a>タグが必ず入るようにしておく （装飾することの多い要素なので，何かと使える要素があると重宝しますからね）

　小林的に思いつく，クラス属性に関する提案には

• 現在のページに対するa要素に「.current」というクラス名を付けておく
• さらに，現在いるカテゴリトップへのa要素に「.current-category」というクラス名を付けておく
• pdfへのリンクとなっているa要素に「.pdf」というクラス名（その他のファイルも同じくファイル名のクラス名）を付けておく
• 外部リンクとなっているa要素に「.external」というクラス名を付けておく

などがあります。

　a要素の例ばかり示しましたが，例えばpdfへのリンクや外部リンクであれば，それらを明示するためのアイコンを背景画像として表示したいということがよくありますよね。こうしたスタイルへの対応にもクラス属性は役立ちます。

　ほかにHTML作りにおける工夫もあります。HTMLの柔軟性を向上させるためのテクニックです。

• 見出しが出現する度にdivを設けて，「.section」などのクラス名を付けておく

　h2・h3要素などが出現した場合ですので，以下のようなHTMLになります。

<div class="section">
<h2>見出し2</h2>
<p>段落</p>

<div class="section">
<h3>見出し3</h3>
<p>段落</p>
<!-- /.section --></div>

<!-- /.section --></div>

　このようにしておけば，「装飾目的で左右にフロートさせた画像が，次のセクションに食い込むのがいやだ」という場合にCSS側で，

.section {　overflow: hidden;　}

とでも記述すれば一括して解決できるわけです。

　また，大見出し以下の内容には，「見た目的にも大見出しにぶら下がっている内容なんだよ」ということを明示するために，左側に20px程度の余白を指定してインデントを付けたいことがありますね。その場合

.section {　margin-left: 20px;　}
.section .section {　margin-left: 0;　}

とすれば，やはり一括して管理することが可能となります。

　上記の例では，「.section」に対して指定した内容を，さらに子要素の「.section」で打ち消すために，「.section .section」という子孫セレクタを利用しています。この記述をもっとスマートにしたいということであれば，「.section」に対して，見出しレベルに沿った連番を付けてあげると良いでしょう。

　先のHTMLの例を，次のようにしておけば，「.section-lv3」のように，必要なdivをCSSで選択することが可能となります。

<div class="section-lv2">
<h2>見出し2</h2>
<p>段落</p>

<div class="section-lv3">
<h3>見出し3</h3>
<p>段落</p>
<!-- /.section-lv3 --></div>

<!-- /.section-lv2 --></div>

　body要素へのID・クラス属性の指定も「CSSによるデザインワークと相性のよいHTML」作りの手段です。最近の僕のやり方ですが，IDとしては，ドメイン名を，クラス名にはディレクトリ名（やページ種別をあらわす名前）を付与するようにしています。

　body要素へのID・クラス属性の指定により，CSSシグネチャが可能になります。つまり，「body.company ul { … }」などのセレクタを利用することで，属するカテゴリ内だけの何かをCSS側から選択できるようになるわけです。

　最後に，これらのID・クラス名は必要・不必要にかかわらず一貫したルールに則って記述しておくことが大切です。デザイン案を実装するにあたり，これらのID・クラス名を必要としない場合でも記述することが必要，というわけです。