当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以外 |
ラベル: 技術, 資料
