IE6で透過 PNG が使えるようになる JavaScript は結構色々ありますが、background-repeat や background-position に対応したものはあまり見かけないので、いざというときに活躍してくれるはずです。
ファイルサイズも圧縮版で約5KB と軽いです。

使い方は、

1. DD_belatedPNG.js を読み込む
2. head 内で DD_belatedPNG.fix() を呼び出し、適用させたい CSS セレクタを指定する

となっています。
具体的には、

<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.6a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.png_bg');</script>
<![endif]-->

IE6以上のブラウザなどには意味がない指定なのでコンディショナルタグで他のブラウザには読ませないようにしています。
スクリプトのバージョンが0.0.6a となっているので、今後もっと軽くなったりするのが楽しみです。

関連投稿

• 要素の高さをそろえる jQuery プラグイン The EqualHeights jQuery Plugin
  category: JavaScript > jQuery tags: JavaScript+jQuery.
• 透過 PNG を使う時に注意すること2
  category: CSS tags: IE6+JavaScript+透過 PNG.
• 透過 PNG を使う時に注意すること
  category: CSS tags: IE6+透過 PNG.

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

1. AlphaImageLoader を使う
2. JavaScript を使う

ことになると思います。

AlphaImageLoader を使う場合

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

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

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

JavaScript を使う場合

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

その中でも、透過 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以下で、

1. a 以外の要素に :hover などの疑似クラスが使えるようになる
2. position:fixed が使えるようになる

というものです。

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

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

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

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

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

[JS]超軽量で設置も簡単な、透過 PNG を IE6で表示するスクリプト -Unit PNG Fix

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

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

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

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

関連投稿

• 透過 PNG を使う時に注意すること
  category: CSS tags: IE6+透過 PNG.

透過 GIF をグラデーションのかかった部分に乗せるとどうしても汚い部分ができてしまいます。しかし透過 PNG だとそういうことが無いので、今後透過 GIF よりも使われることが多くなっていくと思います。

僕個人としてはどんどん使っていきたいものなのですが、透過 PNG を使う際には気をつけなきゃいけないこともあると思います。
具体的には、

1. 本当に透過 PNG を使わなきゃいけないのか？
2. ターゲットブラウザをどこまでの範囲にするのか？
3. IE6など、対応していないブラウザに対してどういう処理をするのか？

ということ。
他にもいろんな考えがあるかもしれませんが、このような問題をクリアしないとなかなか使いにくい状態に陥ると思います。

まず1の問題。

「透過 PNG を使う時に～」というタイトルを根本から否定することにもなりますが、実は一番大事なことだと思っています。

使わないでも同じデザイン・機能を表現できるなら透過 PNG を使わないほうが確実に安全なサイト作りができると思いますｗ
しかも使わなくても何とかなる場合が結構あると思います。

以前作成したサイトに透過 PNG を使ったのですが、対応ブラウザの件（後述）で余計な手間がかかってしまうことも含め、透過 PNG を使う必要はなかったと思ってます…。

次に2の問題。

すべてのユーザーがブラウザを最新にしているならまだしも、未だに IE6もしくはそれ以下のブラウザを使っている人も結構います。

そういった人達もターゲットにしたいサイトならば、透過 PNG を使わない、もしくは JavaScript を使って透過しているように見せるなどの対処が必要になります。
この場合なら使わないのが最善策な気がします。

最後に3の問題。

2の問題があったとしても透過 PNG を使うことを諦められない！という場合には、IE6など古いブラウザでもちゃんと見れるようにしないといけません。
具体的な対応策としては、

1. AlphaImageLoader を使う
2. JavaScript を使う

というもの。
ここらへんが一般的なんじゃないかと思います。

長くなったので、次回に続きます。

関連投稿

関連投稿はまだありません。