低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

IE条件付コメントまとめ

条件付コメントとは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
「以下」の指定の仕方が間違っているとのご指摘をいただきましたので、それを踏まえて以下の点につきまして内容を修正・加筆いたしました。
ご指摘ありがとうございます!

■修正・加筆内容
・注意点の追加
・バージョン指定例の表を更新
・「以下」の指定の仕方を修正

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ