HTML魔法の呪文（IE用-条件分岐コメントタグ）
IE用（特に6以前のバージョン）、条件分岐コメントタグ
IE6は透明pngに対応していない
Webで画像を配置し、その背景を透明化したい時、gif と png の透明化機能を使う。
8ビットのgif に対し、24ビットのpng の方が圧倒的にきれいだ。ファイルサイズはその分膨らむが、ブロードバンドが一般的になっている現在、そのデメリットは無視できる場合が有る。
ただ問題が一つあって、png の透明化に、IE6が対応していない。
そして未だIE6を無視してWebサイトを作成して、問題なしと言う状況では無い。つまり未だIE6は一定のシェアを持っている。
その解決方法。
つまりIE7以降のバージョン、及び他のブラウザ（Firefox等）にはpng のきれいな画像を読み込ませ、IE6 にはgif 画像を読み込ませると言う方法を取る。
具体的には、IE6用のgif 画像を用意し、その画像を読み込ませるスタイルシートを用意する。
条件分岐のスタイルシート
<!-- IE6以前バージョン専用CSS読み込み分岐 -->
<!--[if lte IE 6]>
<link rel="stylesheet" tipe="text/css" href="「この部分に読み込ませるcssのリンク先を記入」" media="screen" /><![endif]-->
<!-- IE6以前バージョン専用CSS読み込み分岐ここまで -->
2行程度のこのコメントを必要な要素に配置しておけば良い。
と言うよりもこの呪文を、body要素の冒頭に配置しておけば、それだけでページ全体にニラミを効かせてくれるから、特に他に問題が無い限りその方が良さそうだ。 効果の切れ味もなかなか鋭い。
後は正規のスタイルシートと併せて、変更する要素のプロパティだけを書き出した分岐用のスタイルシートを用意し、上記コメントで指定したルートに保存しておけば良い。
CSSに最も忠実だとされているFirefoxと、一番鬼っ子のIE6で表示の検証しながら、違いが出たらこのスタイルシートを訂正しておけば良い。
-
上図左
png画像（venus）をIE8で表示したもの。背景がきれいに透明になっている。 -
上図中
png画像をIE6で表示したもの。背景が白く残る。 -
上図右
gif画像をIE6で表示したもの。背景が透明になっている。
※ 画像をクリックすると拡大表示されます。
