条件付きコメントについて

　CSSハックはWebブラウザのバグを利用したいわゆる裏技でしたが、もう1つ「条件付きコメント」と呼ばれるXHTMLのheadタグにif文を入れて、CSSファイル自体を分岐する方法があります。これはIEのみの独自拡張で、Webブラウザ別にCSSを分けたい場合に有効的な手法です（図3）。

　CSSハックと条件付きコメントはどちらにも、メリット／デメリットがあります。CSSハックのメリットは、セレクタレベルで指定できることです。Webブラウザのバグによる表示の違いは一部のIDやクラスで発生することが多く、部分指定のみ振り分けたい場合に便利です。その反面、あくまでも裏技なので、正式にWebブラウザが推奨している訳ではありません。

　一方の条件付きコメントは、MicrosoftのInternet Explorer開発チームも推奨していますが、XHTMLに分岐の指定を直接書き込まなければいけない点と、CSSファイルをWebブラウザのバージョン別に用意する必要があるために、管理面で手間が発生してしまいます。

　現状では、この2つを適材適所に使い分けているサイトが多いようです。

CSSレイアウトに便利なリセット方法

　CSSレイアウトを使ってコーディングを行う場合に、有効的な方法としてWebブラウザの初期値を「リセット」する方法があります。各Webブラウザは、初期値としてXHTMLのタグ要素にサイズや余白、スタイルを予め設定しています。

　このことによって、XHTMLに

や

を指定して、各Webブラウザで表示をさせるとそれぞれ異なったフォントサイズや行間になってしまいます。

　この各Webブラウザのデフォルトスタイルを一旦すべてリセット（もしくはクリア）してから、CSSの指定を改めて行うことによって、Webブラウザ別の表示の違いを解消する手法の1つに「Yahoo! UI Library Reset CSS（http://developer.yahoo.com/yui/reset/）」があります。

　これは米国のYahoo! Inc.が、Webディベロッパ向けに提供しているサービスで、Yahoo! UI Library（通称YUI）のReset CSSファイルをリンクで読み込ませるか、CSSファイルをダウンロードして、直接組み込む方法の2種類があります。

　CSSファイルを管理する場合に、最初にYUI Reset CSSを読み込ませてから、その後に、デザイン用のCSSを読み込ませることで、Webブラウザ間の表示違いを解消することができます。

　これまで、「CSSの基本ボックスモデルの解釈」「floatプロパティを使ったカラム作成」「リストタグを使ったナビゲーション作成」、そして今回は「Webブラウザ検証と対処方法」を解説しました。これらの手法を実践しマスターして、旧式のテーブルレイアウトから完全脱出のステップにしましょう。