前回エントリで述べたPNG形式の優位性、アルファチャンネル使用による透過ですが、Internet Explorerではヴァージョン7からの対応となり、それ以前のヴァージョンでは透明部分が灰色に表示されてしまうなど上手く表示されません。ブラウザシェアの全世界および国別割合がわかるこちらのサイト（http://gs.statcounter.com/）の数字を見ると、代表的な未対応ブラウザであるInternet Explorer 6のシェアが、2012年1月現在全世界で約1.6%、日本で約2.3%であることがわかります。数年前に比べればあまり大きな割合ではないので対応を放棄してしまうというのも十分ありなのですが、もし手間をかけず対応させたいのであれば、Googleの公開しているIE7.jsを利用するのが便利です。
IE7.jsの概要
IE7.jsは、古いヴァージョンのIE（5.5〜）に新しいヴァージョンのIEの機能を提供する目的で作られたライブラリで、拡張子に.jsと付いていることから判るように、JavaScriptのライブラリです。ですが使用にJavaScriptの知識は必要なく、html文書のヘッダ部でリンクを明示するだけで使用できるようになります。
（2012.6追記：この部分の画像は000webhostに接収されてしまいました）
上のコードの赤字部分が必要なコードになります。透過PNG対応の話からは余談になりますが、同様に以前のヴァージョンのIEをヴァージョン8相当および9相当にする、IE8.js、IE9.jsというライブラリも存在します。それらを呼び出す場合には、一行目のIE 7の部分を呼び出すヴァージョンに、二行目のアドレスの末尾をIE8.jsやIE9.jsに変えてください。
さて、ライブラリの宣言が終ったら、透過を有効にしたいPNGファイルの末尾に-transを加えて保存してください。上の例では、titleimage.pngというファイルの透過を有効にしたかったので、titleimage-trans.pngとリネームして保存しています。これで必要な作業は終わりです。
注意点があります。まずこの機能は閲覧者がJavaScriptを有効にしていないと働かないということ。そして、透過PNGを背景画像として使用した場合にbackground-repeatやbackground-positionが上手く機能しなくなってしまうという点です。前者については、そもそも再三の注意喚起にも関わらずIE6を使い続けている（使い続けざるを得ない）閲覧者がJavaScriptを有効にしているのかという疑問がありますし、後者の仕様などは、うっかり見落としてIE6での見え方が大変なことになったとして、それを確認できる環境がページ作成者の手元に揃っているとは限らないため問題が長く放置されてしまう可能性が高くなるのが困りものです。
ということで、透過PNGをレイアウトに使いたい場合にIE7.jsを使うか、それともIE6はお断りと但し書きをするかについては、最初に提示したIE6のシェアも加味して結論を下しても良いのではないかと思います。仕事の場合であれば、クライアントが依然IE6を使っていそうだったらしっかり対応するといった具合で良いのかもしれません。
