IE6対策PNG透過表示最強スクリプト｜DD_belatedPNG.js

29,496 view

更新日：2014年11月03日投稿日 : 2013年01月18日

「IE6、死ね！」「IE6、爆発しろ！」

このような狂った叫びがWEB制作業界のあちこちから聞こえてきますが、本当に制作者にとってIE6（Internet Explorer 6）は困った存在です。ってかIE自体が…。

でもちょっと以前携わっていた案件の条件が「IE6メインで閲覧できるように」という事で、逆に最新ブラウザに拘らず気持ちの角度を変えてみたらどことなく気を楽に取り組めた私でした。IE6で見れればどんなデザインでも良いのだから。
でもやっぱり新しさを求めたいWEBデザイナーとしての血が騒ぎ、IE6でも凝ったデザインにチャレンジしてみたい！そんな思いがフツフツと湧いてきて、IE6でPNG透過画像をガンガン利用したデザインにチャレンジしたのでした。

制限が無いようで制限多すぎのIE6に立ち向かった訳で…真のWEBデザイナーはIE6から逃げたりしない！（笑）

今回は、その時大変お世話になった頼もしいスクリプトをご紹介致します。
昔から色々と試してきましたが、これが今のとこ最強！

DD_belatedPNG.jsとは

DD_belatedPNG.jsは、IE6で透明部分のあるPNG画像を表示させることができる最強の”Javascript”です。
“js”を読み込み、class指定を加えるだけで簡単に設定できます。

ダウンロード

下記URLから、DD_belatedPNG.jsをダウンロードします。
http://dillerdesign.com/experiment/DD_belatedPNG/#download
ダウンロードする”.js”が”**a.js”と”**a-min.js”２つありますが、
どちらも同じものなので、自分でスクリプトを書きなおさない場合はサイズの軽い”**a-min.js”を利用しましょう。

Javascriptを挿入

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('img, .png');
</script>
<![endif]-->

DD_belatedPNG.fix(‘.png’);のところの「.png」がPNG画像に指定するクラス名です。
‘img’は、jpgやgifもある中からpng画像だけを見つけてクロールしてくれます。’img’を取ってもOKです。

htmlにclassを指定する

classに”png”を追加する。

♪ ロゴにPNG画像を使う場合（ロゴじゃなくても良い）

<div class="logo"><a href="http://example.jp" title="PNG画像"><img src="img/image.png" alt="PNG画像" width="230" height="60" class="png" /></a></div>

♪ 背景にPNG画像を使う場合

<div id="back-image" class="png">

<div class="back-image png">

使用不可の場合もある

☓ body、tr、td の背景要素には使用不可。
☓ background-position:fixed;には使用不可
上記、使用制限があるので注意しましょう。

最後に

“DD_belatedPNG.js”を開発してくれた方、本当にありがとうございます。感謝。
これを使わない時代に早くなって欲しいです…。
IE6もIE7も最近はIE8も死んでしまえと思っていますが、やっぱりIE自体死んで貰いたいと思ってます（笑）
IE問題で頑固なクライアントの為に困り果ててる時があると思いますが、皆さん”DD_belatedPNG.js”を是非試してみて下さい。
ちなみに当方ではIE6やIE7の対応は、別途有料にしております。みんなもしましょう！