IE用条件付コメントのまとめ

当BlogのCSSをいじりました。念願の「メニューは固定幅で本文部分は可変幅」というレイアウトが出来上がりました。

使用心地は大差ないでしょうがこれからもどうかよろしく。



CSSをいじってはブラウザでチェック、いじってはチェックという作業を繰り返してやっていましたが、「ここをいじると、こうはなるけどああはならない」というような「こちらが立てばあちらが立たず」状態が幾度も発生しまして、いくらかの苦労を致しました。



その中で「ここをいじるとAというブラウザでは正しく表示されるけどBというブラウザでは見られたもんじゃないな」という現象も経験します。この「Bというブラウザ」こそ、かの悪名高きWebブラウザ「Internet Explorer」です。正確には「Internet Explorer 6」。略して「IE6」。

かつてはPC使用者の使用率ほぼ100%を誇ったWebブラウザです。今では使用率が5～6割となったようで、残りはFirefoxや次期IEの「IE7」に移行しつつあるようです。



CSSを正しく書いてIE6で正しく表示できないなら、できなきゃできないでいいか――というようにも行かず、IE6は無視することができない程度に普及しておりますので、対策を考えなければなりません。

と、そんなことを考えていましたら「[CSS]スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方 | コリス」というページを知りました。

「条件付コメント」という技法があるそうで、それを使って今回問題を解決したわけですが、どうせすぐ忘れそうなのでまとめておきます。



以上、読まなくても差し支えない戯言。

条件付コメントとは

<!--[if IE]>ほげほげ<![endif]-->

と書けばIEだけが見られるテキストが書けたりするIEのIEによるIEのための独自仕様。

JavaScriptではないので割と手軽。



例：以下の部分をIEとIE以外のブラウザで見比べると、テキストの内容が違うことが分かります。

今すぐ指定の口座に振り込んでください。

あなたの住所を調べることもできます。

あなたのブラウザがIEでないのは分かっています。

あなたのIPアドレスは127.0.0.1です。

決まり

「<!--[if」で始まるものは「<![endif]-->」で閉じる

「<![if」で始まるものは「<![endif]>」で閉じる

バージョン番号は「IE 5.5」のように小数も使用可能

IE5未満のIEは条件付コメントが未実装なので他のブラウザと同じ扱いになる



以下、調べはしましたが「理論上はこうだろう」とノリで書いて確かめてない部分があるので、実際は違うかも知れませんが、ご了承ください。

表の左側に条件付コメントの書き方の例、右側にその書式で書かれた文を読むことのできるWebブラウザが何であるかを書きました。

基本編

<!--[if IE]>	IE
<![if IE]>	全てのブラウザ（IEとIE以外）

バージョン指定

<!--[if IE 6]>	IE6
<![if IE 6]>	IE6とIE以外

否定編

NOT

<!--[if !IE]>	無し（IEとIE以外ではない）
<![if !IE]>	IE以外

バージョン付NOT

<!--[if !IE 6]>	IE6以外のIE
<![if !IE 6]>	IE6以外のIEとIE以外

不等号編

Greater-Than（より大きい）

<!--[if gt IE 6]>

IE6より大きいIE

Less-Than（未満）

<!--[if lt IE 6]>

IE6未満のIE

Greater-Than or Equal（以上）

<!--[if gte IE 6]>

IE6以上のIE

Less-Than or Equal（以下）

<!--[if lte IE 6]>

IE6以下のIE

まぎらわしい編 論理積・論理和

AND

<!--[if (gte IE 5 & lt IE 6)]>	IE5以上かつIE6未満のIE
<![if (gte IE 5 & lt IE 6)]>	IE5以上かつIE6未満のIEとIE以外

OR

<!--[if (lt IE 6 | gte IE 7)]>	IE6未満またはIE7以上のIE
<![if (lt IE 6 | gte IE 7)]>	IE6未満またはIE7以上のIEとIE以外

ややこしい編 否定論理積・否定論理和

NAND

<!--[if !(gte IE 5 & lt IE 6)]>	IE5以上ではないかつIE6未満ではないIE
<![if !(gte IE 5 & lt IE 6)]>	IE5以上ではないかつIE6未満ではないIEとIE以外

NOR

<!--[if !(lt IE 6 | gte IE 7)]>	IE6未満ではないまたはIE7以上ではないIE
<![if !(lt IE 6 | gte IE 7)]>	IE6未満ではないまたはIE7以上ではないIEとIE以外