株式会社K-fix

トップ＞スキル： Web ＞ CSSハック

Page
T
Pre
Next

CSSを使ってデザインを適用していて、他のモダンブラウザ（FireFox、Safariなど）ではうまく表示されるが、IEだけレイアウトなどのデザインが崩れてしまうことがあります。また、IE7ではうまく表示されたけど、IE8にバージョンアップしたらおかしくなった・・ということもあります。

マイクロソフトは、IEに対してHTMLの独自の拡張として「条件付きコメント」という記述方法をサポートしています。これは、HTMLのコメントの記述方法を拡張したもので、次のようなことが実現できます。

IEのみにスタイルを適用する
IEだけ除外してスタイルを適用する
IEの特定のバージョンのみにスタイルを適用する
IEの指定バージョン以上にスタイルを適用する
IEの指定バージョン以下にスタイルを適用する

この条件付きコメントは、HTMLを独自に拡張したものなので、IEだけにJavaScriptを読み込ませたり、IEのみに表示されるメッセージを作るような、CSS以外にも活用できます。但し、Mac用IEには対応できません。

条件付きコメントの書式

条件付きコメントの書式は以下のようになります。

条件式の部分に合致するブラウザのみが、（内容）の部分に記述されたHTMLを読みます。それ以外のブラウザは、（内容）の部分はコメントだと判断されるので表示されません。

IEで閲覧した時のみ表示される

IEで閲覧した場合だけ内容が表示されるようにするには、以下のように記述します。ブラウザがIEの時は、「IEだけ表示されます。」と表示されるが、その他のブラウザはHTMLコメント判断して無視され、何も表示されません。

IEの対象バージョンを指定する

IEのそれぞれのバージョンを指定する時は、以下のように記述します。ブラウザがIE6であれば、「IE6のブラウザです。」と表示され、それ以外のバージョンは無視されるので何も表示されません。

IEの対象バージョンの幅を指定する

IEのバージョンに幅を持たせることができます。例えば、「IE6以上」のバージョンとか「IE7以下」のバージョンと指定することで、複数のバージョンに対して適用されます。

「以上」を対象にする

例えば、IE6以上を対象にする場合は、次のように、「gte」をブラウザのバージョンの前に記述します。ちなみに「gte」は「Greater-Than or Equal」の略です。

「以下」を対象にする

例えば、IE8以下を対象にする場合は、次のように、「lte」をブラウザのバージョンの前に記述します。ちなみに「lte」は「Less-Than or Equal」の略です。

IEすべてをを対象外にする

IEには読ませず、IE以外のすべてのブラウザを対象にするには、「!」をIEの前に記述します。

同様に、特定のIEのバージョン以外を対象にすることができます。例えば、IE6以外のブラウザだけを対象にするには以下のように記述します。

スタイルシートを振り分ける

IEのみに発生するCSSの解釈問題を解決するには、すべてのブラウザ用とIE専用のスタイルシートに分けて作成し、それを条件付きコメントを利用してスタイルシートを振り分ける方法を行います。

例えば、次のようなスタイルシートを２つ作成したとします。また、それぞれの中には、p要素の文字色をすべてのブラウザには「赤」、IEには「緑」を指定したスタイルが記述されているとします。

style.css（すべてのブラウザのためのスタイルシート）
p { color:#333333; }
ie.css（IE専用のスタイルシート）
p { color:green; }

条件付きコメントを使って、IEだけにie.cssのスタイルシートを読み込ませるリンクを記述します。

<head>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
IEは緑色、その他のブラウザは赤になります。
</body>

また、IE8以下のブラウザだけに適用したいのであれば、<!--[if IE ]> の部分を「<!--[if lte IE 8 ]>」とします。

CSSハックを使わないで、IEで起こってしまうスタイルシート解釈問題に対処する条件付きコメントを使う方が、将来的な展望を考えた時には良いかもしれません。

【IEの条件付きコメント】

Page
T
Pre
Next
↑