テーブルレイアウトの持ついくつかの問題を解決できる方法が、CSSレイアウトだ。HTMLの表現力を補完するオマケのようにとらえられてきたCSSだが、最近ではXHTMLやXMLの普及でページ表現を司る最善の方法と見なされるようになった。
■CSSレイアウトの長所と欠点
一言でいえば「見栄え担当」であるCSSだが、サイト構築手段として以下のような具体的な効能を発揮する。
・文書構造とスタイルを確実に分離できる
・本来の用途に忠実なタグ選びができる
・スタイルの管理がしやすい
・スタイリッシュなサイトが作れる
・文書構造とスタイルを確実に分離できる
XHTMLと併用することで得られる利点がこちらである。XHTMLの場合、文書構造（HTML）側にスタイルの記述を含めることが推奨されないので、必然的にスタイルはCSSで記述することになる。構造とスタイルを分離すれば、１つのコンテンツに対して携帯用、プリント用、画面表示用といったデバイス別の表示方法を指定することも可能だ。また、HTMLソースも単純になるので検索システムなどが内容を解析しやすくなる。結果的に内容に合ったキーワードからサイトに到達しやすくなるなど、検索効率の向上にも繋がっていく。
・本来の用途に忠実なタグ選びができる
前述の利点の前提とも言うべき内容だが、特定のスタイルを実現する目的でHTMLタグを「裏技」的に使用しなくても良くなるため、内容に忠実なタグをコンテンツに与えられる。例えばHTMLのみの表現では複数行で表示となるリストタグも、CSS側で一列に並べる使い方が可能だ。こうすることで横方向のナビゲーションにリストタグを与えて意味とタグの両立を図ることができる【図1】。
 |
| 【図1】リストタグでマークアップした情報を、CSSで列方向に並べる指定を行ったレイアウト。スタイルなしの表示ではビュレット（黒丸）付きのリストになる |
・スタイルの管理がしやすい
全画面に共通の要素は、セレクタ（スタイルをあてがう目印になる名前のこと）を統一して管理すれば、そのセレクタに対する修正を全ページに反映させられる。共通のスタイルを含むページデザインは管理しやすい他、その表現の一貫性がサイトに対する慣れやすさ、使いやすさの実現にもなるという相乗効果を生む。
・スタイリッシュなサイトが作れる
表現力の高さもCSSレイアウトの良いところだ。ピクセル指定で素材の位置やサイズ調整が行えるなどレイアウトの精度も向上する。各種ブロックレベル要素には背景色や画像を指定できる点も、独創性のあるページデザインには有効である【図2】。
 |
| 【図2】背景画像の上にプレーンテキストを配置したCSSレイアウト。一体化した画像のように見える。CSSの工夫で見栄えと機能を統一した例だ |
しかしそんなCSSレイアウトにも以下のようなちょっとした短所はある。
・コードの作成に時間がかかる
仮想グリッドを作って情報を放り込んでいくテーブルレイアウトは、レイアウトツールを駆使して一度もソースを見ることなく作業が終わることもあり得る。一方、妥当なHTMLソースを構築することが前提となるCSSは、HTMLの編集時、ソースを手入力する必要性がどうしても出てくる。また、CSSの記述方法はツールによって微妙に異なるため、こちらも仕上げ時の直接入力は避けられない。サイトの規模にもよるがツール任せで直感的な作業ができないと、コード生成にはかなりの時間がかかることを覚悟せねばならない。この点を鑑みるとページ数が少なく、しかも短期間に用意しなければならないページの制作ならばテーブルレイアウトを使うことも検討して良いだろう。具体的には１ページで表示するイベントの告知画面、数ページに収まるキャンペーンの説明などだ。
・ブラウザによりCSSの解釈が異なる
CSS最大の欠点は、やはりこの点に尽きる。現状で大きな差が出るモダンブラウザは、Internet Explorer6だ。最も普及しているだけに頭の痛い話である。FirefoxやOpera、Safariなど、標準的なCSSの解釈が可能で、表示も一定しているブラウザでレンダリングチェックしながら、最終段階でIE6向けの微調整を行う制作手順が妥当であろう。ちなみに2006年10月から12月中に正式版を順次リリースする予定のIE7で、表示の問題は大幅に改善されているようだ。
こうした点に考慮して、基本的なスタイル作成手法を決めたい。
