透過PNGを使うとき
まず注意しないといけないのが、IEへの対策。
IE6以下は透過PNGに対応していないので背景が真っ白で表示されてしまう。
対応策は色々あるけど、今回は使い勝手もいいスクリプトを用いた対応策をご紹介します。
使ったスクリプトを提供しているサイト。
Post Production - A Better IE 5.5 and 6 PNG Fix
上記サイトの「Get the code」からソースをダウンロード。
ダウンロードしたファイルを任意のフォルダにいれておく。
コードはCSSを利用してHTML内の画像要素に適用させる。
CSSソース
img {
behavior:url(任意のパス/fx-iepngfix.htc);
}
上記のソースだと全てのimg要素に対してスクリプトが適用される。
背景画像などに適用させたいときは、
.contents {
behavior:url(任意のパス/fx-iepngfix.htc);
background:url(任意のパス/sample.png) no-repeat top left;
}
などと記述すればよい。
これでお手軽にIE6以下でも透過PNGを利用することができる。
スクリプトは他にもあるので自分が使いやすいものを利用して透過PNGを有効活用してみてください！
代表的なものを他に2点あげておきます。
TwinHelix - IE PNG Fix v1.0 / 2.0 Alpha 3
jQuery JavaScript Library - jquery.pngFix.js
ちなみに、当ブログでも透過PNGを使っていますが、使っているスクリプトは「IE PNG Fix」を使っています。
今回は、あえて自分の使っていない物をご紹介しましたが、「A Better IE 5.5 and 6 PNG Fix」は使用するファイルがスクリプトファイルのみなので始めて透過PNGを使う方にはオススメかもしれません。