yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。
ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。
まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑
たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。
ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように
たとえばグローバルナビゲーションとカテゴリー別のナビゲーションが同じulで書かれているとして、どちらがどちらかCSSで特定できないと、別の見た目にしようとしても難しいです。
<ul> <li>グローバル</li> <li>グローバル</li> </ul> <ul> <li>カテゴリ内</li> <li>カテゴリ内</li> </ul>
なので可能な限り「表示される内容に共通項のない部分」にはそれぞれID割り振るなどして特定できるようにします。
<ul id="gNavi"> <li>グローバル</li> <li>グローバル</li> </ul> <ul id="catNavi"> <li>カテゴリ内</li> <li>カテゴリ内</li> </ul>
さらに、「同じ『ナビゲーション』なので」ということで、同じクラスを振っておくと、似たような見た目にしたい場合に便利。
<div id="gNavi" class="navigation"> <ul> <li>グローバル</li> <li>グローバル</li> </ul> </div> <div id="catNavi" class="navigation"> <ul> <li>カテゴリ内</li> <li>カテゴリ内</li> </ul> </div>
もちろん、たとえば「ページ内にH1タグは一つしかない」というポリシーが全ページできちんと貫かれていれば、H1タグに余計なIDをつけたりしなくても問題ないと思います。
大事なのは「ちゃんと別々のものだと区別できること」です。
同じようなものには同じクラスを割り振る
IDはその名の通り、ページ内に唯一のものに割り振っておくべきものです。一方で「クラス」は、同じようなものを「これとこれは同じようなものですよ」ということを表す場合に使います。
似たものはやはり似たような見た目にしたい場合が多いので、似たような要素にはできるだけ同じクラスが割り振られているほうが好ましいと思います。
逆に、たとえば同じような内容なんだけどちょっとだけ違うものに、全く別のクラスが指定されていると色々と面倒です。
たとえば、ブログの新着記事のリストと人気記事のリストがあったとして、
<ul class="recentPostList"> <li>記事1</li> <li>記事2</li> </ul> <ul class="popularPostList"> <li>記事i</li> <li>記事ii</li> </ul>
としてしまうと、二つのリストに同じ見た目を指定したいときに、
ul.recentPostList,
ul.popularPostList{}
といちいち書かなくてはいけなくなります。※まあ２つくらいだったらいいのですが、これが多くなってくるとだいぶ残念な感じになっていきます。
こういう場合は、クラスはスペースで区切って複数指定できますので、たとえば
<ul class="postList recent"> <li>記事1</li> <li>記事2</li> </ul> <ul class="postList popular"> <li>記事i</li> <li>記事ii</li> </ul>
とすると、CSSでは、共通のスタイルを「ul.postList」で指定し、それぞれちょっと別の見た目にしたければ「ul.recent/ul.popular」に指定、という形でスマートに書きやすくなりますし、メンテナンス性もよくなると思います。
tableのtrごとに「odd」「even」
テーブルは特に大きくなると見にくくなりがちです。
1行おきに色などを変えられるようにする意味で、テーブルの行ごとにクラスをなにかしら交互に指定してあると、スタイル割り当てがしやすくなります。
同じようにリスト系要素（li）など繰り返される要素にも割り当ててあると便利かも。
リスト系要素（ul,ol,dl)の最初と最後が特定できるようにしておく
:first-childなどの擬似要素がすべてのブラウザでちゃんと使えればこんなものはあまり必要ないのですが、IE6などの対応状況を考えると現実問題としてまだまだ使えません。
ので、リストなどの同じ要素の連続するものの場合は、できるだけ最初と最後に「これが最初の要素」「これが最後の要素」だということがわかるようにしておきます。
<ul> <li class="first">xxxx</li> <li>xxxx</li> <li>xxxxx</li> <li class="last">xxxx</li> </ul>
なんでこういうことが必要になるかというと、
- 最初の要素だけマージンを狭く/広くしたい
- 最後の要素だけマージンを狭く/広くしたい
- 最初の要素のところにだけ背景画像指定したい
- インライン化して横並びのメニューにして、間に線を入れたいんだけど全部のli要素に線を割り当てると一本余計になるので消したい
などなど、最初/最後の要素はちょっとだけ違うスタイルにしたいことが結構よくあるからです。
h1～h6タグ直下には<span>か<a>タグが必ず入るようにしておく
「見出し」はやはり「画像に差し替えたい」とか、「特別な装飾を施したい」とかいったことがよくあります。
また、文字の書かれてる部分だけに装飾したい場合や、margin/paddingのコントロールの都合で子インライン要素があるほうが調整しやすくなります。
といったわけで、直下に<span>もしくは<a>タグなどのインライン要素が入るようにしてあると、CSSでのデザインの幅がだいぶ広がると思います。
<h1>hogehoge</h1>
ではなく
<h1><span>hogehoge</span></h1>
その他にもCSSの猛者の皆様的に「こうなっていると嬉しい」という例あると思いますので、もし何かあればぜひ教えてください！