条件付コメントとはIEの独自仕様でそのコメントで囲われた部分の表示・非表示をバージョンによって分けることができるというものです。
例えば、IE用のCSSを別に用意した場合に、そのCSSを読み込む際に使われたりします。
IE条件付コメントの書式
条件付コメントの書式は、指定のバージョン・指定のバージョン以上・指定のバージョン未満に分かれます。
指定のバージョン
<!–[if IE 6.0]>内容<![endif]–>
指定のバージョン以上
<!–[if gte IE 6.0]>内容<![endif]–>
指定のバージョン以下
<!–[if lte IE 6.0]>内容<![endif]–>
指定のバージョン未満
<!–[if lt IE 6.0]>内容<![endif]–>
6.0 というのがバージョンの指定です。ここの数字を変更することで、対象のブラウザを決めることができます。
| 指定のバージョン | IE6 | IE7 | IE8 | IE9 |
|---|---|---|---|---|
| <!–[if IE 6.0]>内容<![endif]–> | ○ | |||
| <!–[if IE 7.0]>内容<![endif]–> | ○ | |||
| <!–[if IE 8.0]>内容<![endif]–> | ○ | |||
| <!–[if IE 9.0]>内容<![endif]–> | ○ | |||
| 指定のバージョン以上 | IE6 | IE7 | IE8 | IE9 |
| <!–[if gte IE 6.0]>内容<![endif]–> | ○ | ○ | ○ | ○ |
| <!–[if gte IE 7.0]>内容<![endif]–> | ○ | ○ | ○ | |
| <!–[if gte IE 8.0]>内容<![endif]–> | ○ | ○ | ||
| <!–[if gte IE 9.0]>内容<![endif]–> | ○ | |||
| 指定のバージョン以下 | IE6 | IE7 | IE8 | IE9 |
| <!–[if lte IE 6.0]>内容<![endif]–> | ○ | |||
| <!–[if lte IE 7.0]>内容<![endif]–> | ○ | ○ | ||
| <!–[if lte IE 8.0]>内容<![endif]–> | ○ | ○ | ○ | |
| <!–[if lte IE 9.0]>内容<![endif]–> | ○ | ○ | ○ | ○ |
| 指定のバージョン未満 | IE6 | IE7 | IE8 | IE9 |
| <!–[if lt IE 7.0]>内容<![endif]–> | ○ | |||
| <!–[if lt IE 8.0]>内容<![endif]–> | ○ | ○ | ||
| <!–[if lt IE 9.0]>内容<![endif]–> | ○ | ○ | ○ |
実用例
例えばIE6以下にだけスタイルシートを読み込ませたいときは以下のように書きます。
1 | <head> |
2 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
3 | <!--[if lte IE 6]> |
4 | <link type="text/css" rel="stylesheet" href="ie6.css" /> |
5 | <![endif]--> |
6 | </head> |
1 | <!--[if IE 6.0]> |
2 | <p>IEの6.0で見ていればこの文章が見えるはずです。</p> |
3 | <![endif]--> |
注意点
-
スタンドアロン型IEは条件付きコメントを正しく認識しないためIE条件付コメントを使用したサイトを上手くチェックできません。
そのため、別のPCを使うか、VPC（Virtual PC）を使いましょう。
IEtesterであれば問題なくチェックできます。 - このIE条件付コメントは推奨されているものではありません。便利ですが多用することは避けましょう。
- IE1～4,10～は条件付コメントの機能が実装されていないので単なるコメントと同様に扱われます。
■追記 2014/01/15
「以下」の指定の仕方が間違っているとのご指摘をいただきましたので、それを踏まえて以下の点につきまして内容を修正・加筆いたしました。
ご指摘ありがとうございます！
■修正・加筆内容
・注意点の追加
・バージョン指定例の表を更新
・「以下」の指定の仕方を修正
