Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

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

29,482 view
更新日:2014年11月03日 投稿日 : 2013年01月18日
  • はてなブックマーク
  • facebook
  • twitter

「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”2つありますが、
どちらも同じものなので、自分でスクリプトを書きなおさない場合はサイズの軽い”**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の対応は、別途有料にしております。みんなもしましょう!

おまけ|IE6対策ツールのご紹介

♪ IE6,7,8,9の同時表示確認ツール。IEを作った会社が作ったIEチェックのツール
Expression Web SuperPreview
♪ スタイルシート(CSS)を自動でIE6対応にするオンラインサービス
ie6fixer

もう1記事、読んでみませんか?

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク
  • facebook
  • twitter
29,482 view 2013年01月18日

webdesignerwork 著者

フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench/WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

運営者情報

© 2004 webdesignwork ALL COPYRIGHTS RESERVED.