第３回 XHTML+CSSの役割分担

2006.08.04

　XHTMLはWebページの「構造」（文書構造）を、CSSは「見栄え」（視覚表現）を指定するものである。旧来はHTMLで両方を指定することが多かったが、Web標準ベースの制作では両者の役割分担をはっきりと意識し、分離を図る必要がある。

CSSの役割

　XHTMはWebページの「構造」を指定するための言語であり、本来Webページがどのような見栄えで表現されるかはブラウザやデバイスに依存する。しかし、デザイナーはCSSを利用することで、Webページの「見栄え」についてもコントロールすることができる（見栄え＝視覚表現は「目で見てわかる効果」ということ。CSSには視覚表現だけでなく「聴覚表現」、たとえば見出しは大きな声でゆっくりと読み上げたり、段落と段落の間では適当な間をあけたり、といったことをコントロールする仕組みも用意されているが、ほとんどのブラウザが対応していないため、まだ一般的には使われていない）。

　CSSには、CSS1（1996年12月、1999年1月改訂）とCSS2（1998年5月）のふたつのバージョンがある。CSS1は多くのブラウザが十分にサポートしているが、CSS2は一部のブラウザのサポートが十分とはいえないため、使用の際には少し注意が必要である。

　なお、CSS2のエラーを訂正し、一部の内容を修正したCSS2.1という仕様もある。現在、2006年4月公表のW3C草案が最新版となっているが、実は一度、勧告候補になったのが草案に差し戻されたという経緯がある。CSS2とCSS2.1では説明や機能が食い違う部分があるが、最近のブラウザはCSS2.1に準拠してサポートするのが一般的である（本連載でも、CSS2とCSS2.1の違いをフォローする予定）。

　さて、Webページの価値の大半はコンテンツにあるといってよい。しかし、単にコンテンツを構造化しただけのWebページが、多くのユーザーを満足させられるとは限らない。CSSで「見栄え」という視覚的な価値を付与することで、Webページ全体としての価値を高めることができるのだ。

　シリコンカフェ代表の森川眞行氏は、(X)HTML+CSSを家の建設になぞらえて、「HTMLとCSSってのは、ビルを組み立てる鉄骨（HTML）と内装（CSS）みたいなもの」と述べている（文末のリンクリスト参照）。言い得て妙なたとえであり、XHTMLを鉄骨や壁、CSSを内装や外装と考え、両者の役割をきちんと分離することで、見た目 (CSS) はあとからいくらでも変更することができることになる。

　たとえば、サイドバーの位置を変更するのに、テーブルレイアウトではすべてのページのコードをひとつひとつ書き変える必要があるが、CSSレイアウトであれば、CSSコードの一部をちょっとだけ修正することで、すべてのページのサイドバーの位置が変更できる。

　このように、CSSレイアウトには、SEOやアクセシビリティといったメリットのほかにも、「メンテナンス性の向上」という大きな利点があるのだ。

テーブルレイアウト vs. CSSレイアウト

　よくある誤解として「XHTML+CSSに準拠すると、つまり構造と見栄えを厳格に分離すると、デザインが制約されるのではないか」というものがある。しかし、両者は技術的に全く相関しないばかりか、共存・共栄できる。HTMLであろうとXHTMLであろうと、テーブルレイアウトであろうとCSSレイアウトであろうと、スタイリッシュなページかどうかは結局「画像の作り込み」「色づかい」「間」などが本質だということに変わりはなく、そもそも技術的にどうこうという話ではありえない。