【ホームページ作成】CSSハックを使わずIEのバグに対処する方法

「条件付きコメント」とは

スタイルの適用方法を説明する前に、「条件付きコメント」の記述方法を説明しておきます。
IEの独自拡張である「条件付きコメント」は、以下のような書式でHTML中に記述します。

「条件式」の部分に合致するブラウザのみが、「中身」の部分に記述されたHTMLを読みます。 それ以外のブラウザは、「中身」の部分をコメントだと判断するため、無視します。
※HTMLの文法的には、条件式や中身の部分も含めて全体が「コメント」になっています。

以下に、具体的な記述例を示します。

■最も簡単な記述

上記のソースをHTML中に記述すると、IEで閲覧した場合だけ、「この表示はIEだけで見えます。」という文字列が表示されます。
※「条件付きコメント」は、IE5から搭載された機能なため、IE4以下は対象外です。

「<!--[if IE ]>」～「<![endif]-->」までの領域には、通常のHTMLを何行でも記述できます。ただし、コメント（<!-- ～ -->）の記述を含めることはできませんので注意して下さい。

■対象バージョンを指定する記述

上記のソースは、IE6で閲覧した場合だけを対象にして表示させます。（IE5以下やIE7以上では表示されません。）

■対象バージョンの幅を指定する記述

IE5「以上」を対象にする場合は、次のような記述になります。
「 gte 」は、「Greater-Than or Equal」の略で「以上」の意味です。

IE5「より上」を対象にする場合は、次のような記述になります。
「 gt 」は、「Greater-Than」の略で「より上」の意味です。
※「IE5より上」の場合「IE5自身」は含みません。

IE6「以下」を対象にする場合は、次のような記述になります。
「 lte 」は、「Less-Than or Equal」の略で「以下」の意味です。

IE6「未満」を対象にする場合は、次のような記述になります。
「 lt 」は、「Less-Than」の略で「未満」の意味です。

■指定バージョン「以外」を対象にする記述

「条件付きコメント」には「否定」の記述方法もあるため、指定した条件式に合致しないブラウザのみを対象にすることもできます。

上記の場合は、IE6以外のIEでのみ表示されます。つまり、IE5やIE7では表示されます。 このような記述が必要になることは、あまりないでしょう。

■IEすべてを対象外にする記述

これまでの記述はすべて、「IEのみを対象にする」記述でした。その逆に、「IEには読ませず、IE以外のすべてのブラウザを対象にする」記述方法も用意されています。

上記の記述は、IE以外のブラウザでのみ表示されます。（ただし、IE4以下は条件付きコメントに対応していないため「その他のブラウザ」と同じ扱いになります。ですから、IE4以下も表示対象になります。）

※この「IEを除外する記述」は、今までの条件付きコメントと異なり、「 <!--[if… 」ではなく「 <![if… 」で始まる点に注意して下さい。 終わりも「 <![endif]--> 」ではなく「 <![endif]> 」になります。 （この記述方法だけは、HTMLの文法的には誤りになります。文法チェッカーで調べるとエラーになります。）

他にもいろいろ記述方法のバリエーションはありますが、長くなるのでここでは割愛します。

それでは、実際にこの「条件付きコメント」を使って、IEのみに発生するスタイルシート解釈上の問題を解決する記述を書いてみましょう。

特定のIEに限定して対策用スタイルを適用させる方法へ >>