IE6でアルファチャンネルPNGを使う方法と注意点
- 2008年3月31日 10:39
- Webデザイン
PNGとは
PNGというのは、画像フォーマットの1つです。特長の1つとしてアルファチャンネル(透過属性)を持つことが出来ます。このアルファチャンネルを使うことで、ホームページの制作をシンプルにすることが出来たりします。
しかし、まだまだ主流であるIE6では、このアルファチャンネルPNGに対応しておらず、使う場合にはDirectXの機能を使ったりと結構手間でした。(IE7からは対応)
IE6で透明画像(png)を簡単に使う方法
こちらを使うことで、IE6で透明画像(png)を使うことが簡単に出来るようになります。
しかし利用に関していくつか注意点があります。
注意点1:パス指定は絶対パスで
CSSからファイルへのパス指定が、CSSからではなく、読み込んだファイルからの指定でなければいけません。ですので絶対パスで指定すると良いでしょう。
例:img, div { behavior:url(/common/iepngfix/iepngfix.htc) }
- ついでにIE6のCSSハックするなら下記
- * html img,
* html div { behavior:url(/common/iepngfix/iepngfix.htc) }
注意点2:階層内に含まれているpng以外の背景部分も消える
「div id="container"」などと上階層部分でIE PNG Fixを使ってしまうと、条件はよく分かっていませんが、その範囲内で使っている背景部分(background:)も消えてしまう場合があります。
子要素がない最下層で利用する場合であれば、上記の問題は出ませんので、下記のように個別指定で利用すると良いでしょう。
#main-image img { behavior:url(/common/iepngfix/iepngfix.htc) }
注意点3:背景画像の繰り返しができない
背景画像を繰り返す「repeat-x」「repeat-y」「repeat」が効きません。ですので、繰り返し処理で事が済みそうな背景画像でも、大きな画像を用意する必要があります。
08/09/03 追記
アルファチャンネルPNGは便利
アルファチャンネルPNGが標準で使えるIE7のシェアもだんだんと増えてきています。使うのに少しコツが要りますが、非常に便利な機能ですので、一度使ってみてはいかがでしょうか。
- このエントリーのトラックバックURL
- http://www.ibnet.ne.jp/mt/mt-tb.cgi/971