IE条件付コメントまとめ

条件付コメントとはIEの独自仕様でそのコメントで囲われた部分の表示・非表示をバージョンによって分けることができるというものです。
例えば、IE用のCSSを別に用意した場合に、そのCSSを読み込む際に使われたりします。

IE条件付コメントの書式

条件付コメントの書式は、指定のバージョン・指定のバージョン以上・指定のバージョン未満に分かれます。

指定のバージョン
<!--[if IE 6.0]>内容<![endif]-->
指定のバージョン以上
<!--[if gte IE 6.0]>内容<![endif]-->
指定のバージョン未満
<!--[if lt IE 6.0]>内容<![endif]-->

6.0 というのがバージョンの指定です。ここの数字を変更することで、対象のブラウザを決めることができます。

指定のバージョン IE5 IE5.5 IE6 IE7
<!--[if IE 5.0]>内容<![endif]--> ○
<!--[if IE 5.5000]>内容<![endif]--> ○
<!--[if IE 6.0]>内容<![endif]--> ○
<!--[if IE 7.0]>内容<![endif]--> ○
指定のバージョン以上 IE5 IE5.5 IE6 IE7
<!--[if gte IE 5.0]>内容<![endif]--> ○ ○ ○ ○
<!--[if gte IE 5.5000]>内容<![endif]--> ○ ○ ○
<!--[if gte IE 6.0]>内容<![endif]--> ○ ○
<!--[if IE 7.0]>内容<![endif]--> ○
指定のバージョン以下 IE5 IE5.5 IE6 IE7
<!--[if lt IE 5.0]>内容<![endif]--> ○
<!--[if lt IE 5.5000]>内容<![endif]--> ○ ○
<!--[if lt IE 6.0]>内容<![endif]--> ○ ○ ○
<!--[if IE 7.0]>内容<![endif]--> ○ ○ ○ ○

実用例

例えばIE6以下にだけスタイルシートを読み込ませたいときはは以下のように書きます。

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--[if lt IE 6]>
<link type="text/css" rel="stylesheet" href="ie6.css" />
<![endif]-->
</head>
<!--[if IE 6.0]>
<p>IEの6.0で見ていればこの文章が見えるはずです。</p>

<![endif]-->

注意点

  • スタンドアロン型IEは条件付きコメントを正しく認識しないためIE条件付コメントを使用したサイトを上手くチェックできません。
    そのため、別のPCを使うか、VPC（Virtual PC）を使いましょう。
  • このIE条件付コメントは推奨されているものではありません。便利ですが多用することは避けましょう。