透過PNGを使う時に注意すること２

じゅん＠understandard — Wed, 09 Jul 2008 12:31:50 +0000

どうしても透過PNGを使いたい場合、IE6でもちゃんと表示させるには、

ことになると思います。

AlphaImageLoaderを使う場合

AmentiさんのIEと透過PNGという記事にまとめられていて、読むのは大変ですがとても勉強になります。

この中に「標準準拠モードだと効かない」というように書いてあります。
IE6でも標準準拠モードになるように作っている人は要注意の箇所ですね。

AlphaImageLoaderは外部のスクリプトを使わず一番手軽に利用できるIE6の透過PNG対策だと思います。

かなりアバウトな表現になっているのは、同じことをするにも様々なスクリプトがあるから。

その中でも、透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる – DesignWalkerで紹介されている、「iepngfix.js」は結構使いやすいスクリプトなんじゃないかと思います。

これを使うときは、iepngfix.jsを読み込み、cssで該当箇所（仮にクラスhoge）に以下のように指定する。

* html .hoge{
behavior:expression(IEPNGFIX.fix(this));
}

指定するのはこれだけ。
あとは、このjavascriptを適用するのはIE6以下なので、html内でそれらのブラウザにだけ読ませる。
これをやらなくても「* html」がついてるので、どっちにしろIE7以上では効かないです。

IE以外のブラウザにはこの対処法は効かないので、[if lt IE7]の部分を[if IE]に変えて、「IEなら」という条件にしてもいいかも知れません。

他に「IE7.js」というライブラリがあります。

これを読み込んでおき、透過PNGに名前をつける時に「XX-trans.png」（XXは任意）という形式にします。
そうすると、backgroundプロパティでこのPNG画像を指定した際に透過されて表示されるというもの。

このライブラリは透過PNGのためだけのライブラリではなく、これを読み込むと、IE6以下でもIE7と同じようなレンダリングをしてくれるという機能まであります。例えばIE6以下で、

というものです。

ただ注意しなければならないのは、既存のサイトにIE7.jsを読み込むと、IE6用に指定していたcssハックが影響して表示にズレが生じてしまいます。気をつけましょう。

それと、IE7.jsについてもう１つ。
サーバー環境にもよるかもしれないんですが、結構重かった記憶が・・・。

一回あるサイトのリニューアルの際に使おうとしたけど、あまりに遅くて導入を諦めたことがあったので、使ってみたい方は一度チェックしてみたほうがいいと思います。
軽かったらぜひ使いたいライブラリです。今後のバージョンアップに期待してます。

※2008年7月9日23時5分追記

記事を更新した直後に発見してしまったので、追記します。

実際に使ったことが無いし、容量が軽いから動作が軽いとも限らないのでなんとも言えませんが、javascriptファイルだけなら1KBありません。ここまでファイルが小さいのは今までになかったんじゃないでしょうか？

ダウンロードしたら、Zipファイルを解凍し、unitpngfix.jsの1行目にある、clear.gifのパスを自分のサーバーのものにする。
画像のパスを変更したら、htmlからunitpngfix.jsを読み込む。
これだけでいいようです。

注意：imgタグにwidthとheightの値を入れておかないと画像が見えなくなってしまうようなので、それだけは気をつけてくれということです。

使ってみた方がいたら感想を教えてもらいたいですね。

関連投稿