A List Apart - For People Who Make Websites

HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。

フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメントにはHTMLやCSSを記述するうえで、スマートにそしてシンプルに記述するためのテクニックがまとまっている。フロントエンドプログラマやWebデザイナはおさえておきたいドキュメントだ。

たとえば最初にはCSSセレクタの基本的な使い方が説明されている。左の記述はul要素とli要素の両方にclassを指定し、CSSでそのclassを指定している。動作するがスマートとは言い難い記述方法だ。classは親子間要素で引き継がれるので、右のように記述できる。このほうが記述はスマートだし、CSS側でも親子関係が明白になる。

CSSセレクタがうまく使えていない例 - CSSも煩雑なものになる	CSSセレクタをきちんと使っている例 - 親のセレクタを使ってCSSもシンプルに記述

次の技巧としてはpseudo-classes(擬似クラス)が取り上げられている。CSSでは:first-child、:last-child、:only-childといったpseudo-classesを指定して特定の要素のみを特定できる。たとえば次のようなナビゲーションリストを表示させる場合、すべての要素に同じCSSを使っていては要素の間にだけ「|」を表示させることはできない。

ナビゲーションリストの例 - pseudo-classesの使用例を示すために

HTMLはシンプルなものにして、CSSで表示を指定する

左のようなCSSでは余計な「|」まで表示されてしまう。これを避けるために最初か最後の要素に別途idを指定するようにすればHTMLが汚くなってしまう。これをpseudo-classesを使って右のようにCSSを使えば一気に解決という寸法だ(しかしこれはIE6では動作しない)。ただし、このpseudo-classesはまだほとんどの主要ブラウザで実装されていないため、現状ではoffspring.jsを読み込んで機能を補完して使う必要がある。

この方法では余計な縦棒が表示されてしまう	pseudo-classesである:first-childを使って最初の要素だけ縦棒を表示しないように指定

Keeping Your Elements' Kids in Line with Offspringにはoffspring.jsを使った場合のブラウザごとの処理性能についてや、ほかについても細かい説明がある。簡単な提案だがHTML/CSSの記述をスマートにするという点では同氏の提案はかなり興味深い。フロントエンドプログラマやWebデザイナは同ドキュメントの内容を一度検討されたい。