2008-07-09

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

どうしても透過 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以上では効かないです。

<!--[if lt IE7]>
<script type="text/javascript" src="iepngfix.js"></script>
<![endif]-->

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 の値を入れておかないと画像が見えなくなってしまうようなので、それだけは気をつけてくれということです。

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