Own products

Tutorial

2009
04/01

IE6用透過png対応策、DD_belatedPNGの使用法と注意点

この記事の読了時間:約615

  • このエントリーをはてなブックマークに追加

以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが
『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』
、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。

この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。

なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。

DD_belatedPNGの使用法と注意点

1.使用するための準備

まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。

配布元のDrew Diller’s blogに行き、左部の記事タイトルから「DD_belatedPNG 0.0.ナントカ」とあるテキスト(ナントカの部分はヴァージョンなので、最新のものを探してください。09年3月29日時点では0.0.7aが最新版となっています。)をクリックしてください。DDシリーズは複数あるので、ちゃんと”belatedPNG”かどうかを確認したらいいよ。

該当記事のショッパナの方にあるリンク(”http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a”とか書いてある部分)をクリック!

すると配布用記事の中段辺りに飛ばされます。少し上にスクロールしてみると、晴れて緑色のボタンがありますので、クリックしてください。
※通常版と圧縮版があるかと思いますが、中身を解析したいとかじゃなければフツーに圧縮版(○○○-min.jsの方)で問題ないと思います。

プレーンなJavaScriptが表示されます。これがウワサの「DD_belatedPNG.js」です!右クリックで「このページのソースを表示」をクリックし、表示されたソースをctrl + aかなんかで全てコピーし、新規テキストにでもペーストして、名前を「DD_belatedPNG.js」として保存してください。

以上で準備完了!めくるめくpngワンダーランドへようこそ☆

2.全体的な基本設定と使用方法

使用したいhtmlのhead部分に、下記のように記入してください。

<!--[if IE 6]>
	<script src="○○○/DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('img, .png_bg');
	</script>
<![endif]-->

ちょっと解説しますと、まず1行目と6行目の文で「IE6にだけ、このスクリプトを実行するよ」と宣言しています。

次に、2行目の「○○○」の部分には、DD_belatedPNG.jsを入れたフォルダパスを。

そして、肝心の4行目。’img, .png_bg’の部分。ここに、DD_belatedPNG.jsを反映させる要素名やid名、クラス名をCSSな書き方で記入します。

上記だと、img要素全て+png_bgというクラス名の要素に対してDD_belatedPNG.jsが動作します。

ホントは処理速度的に多少遅くなるので、できればimg要素にもクラス名を設定したほうが良いのかもしれませんが、いちいちpng画像のimg要素にだけクラス振るのもメンドーな自分は、上記のようにimg要素全てを指定しちゃってます。で、.png_bgは背景にpng画像を使う要素にだけ指定する、と。

ただ、DD_belatedPNG.js内部で画像がpng形式かどうかの判別を行っているようで、gifやjpgにまで影響を及ぼすことはなさそうです。

以上、コレだけで、上記で指定した要素のpng画像には透過が反映されます!

コレだけで、悪夢から覚めることが出来るのです!

3.img要素に使用する場合

ここで、img要素に使用する際のいくつかの注意点を。

ただimg要素にpng画像を使うだけなら、上記で何の問題もありません。

しかし、png画像のimg要素にロールオーバーを設定したい場合、少し注意とコツが必要なんです。

たとえば、png画像のimg要素を<a>要素で囲んでリンクボタンとして、img要素をロールオーバーさせたい場合、img要素に onmouseover=なんちゃら って指定しても、動きません。

ロールオーバーを実現したい場合、下記のようにCSSだけでロールオーバーの動作を再現する設定をしてあげないといけません。

<a href="http://○○○.html" id="rollover01" class="png_bg"></a>
#rollover01 {width:○○○px;height:○○○px;}
a#rollover01:link {background:url(mouse_on.png);}
a#rollover01:visited {background:url(mouse_on.png);}
a#rollover01:hover {background:url(mouse_off.png);}
a#rollover01:active {background:url(mouse_off.png);}

まずcss側で、ロールオーバーさせる画像のサイズ(widthとheight)を固定します。

それから各擬似要素でマウスオーバー時の画像などを指定する方法です。

また、不透明度を操作するJavaScriptには対応していないそうです。jQueryなどでフェードイン/アウトなどを指定しても反応しないのは、仕様の問題のようですね。

同じく仕様としては、input要素にも対応していないそうなので、ご利用の際はご注意ください。

4.divやpなどの背景に使用する場合

「DD_belatedPNG.js」を使う最大の利点とも言えるのが、背景にpng画像をリピート描画できるという事。

同じく背景にpng画像をリピート描画できるスクリプトに「IE PNG FIX v2.0 Alpha」がありますが、やはりこちらはDD_belatedPNG.jsに比べて処理が断然重いように感じます。

png画像を背景に使用する方法は、いたって簡単です。通常のgif形式やjpg形式の画像と同じように使用できます。

<div id="foo" class="png_bg">
	<p>ほげほげふがふが</p>
</div>
#foo {background:url(bg.png) repeat left top;}

まずは背景にpng画像を指定する要素に、head内で設定したクラス名を与えます。

あとは他形式の画像と同様に、繰り返すなり繰り返さないなり、絶対配置するなり相対配置するなり、好きにすればいいさ。

ただしこちらも仕様上の問題でいくつか注意すべき点があります。

忘れてるとハマりそうなのが、body・tr・td要素の背景には使えないという点。ページ全体にpng画像の背景を設定したい場合は、全体を<div id="wrap"></div>などで囲んで、そこに背景を設定する必要があります。

あと、どうやらbackground-position:fixed;には未対応の模様です。

さて、近日中にweb2.0(笑)なジェネレータを公開したいと思っています。

簡単な入力でRSSがGoogle Feed APIのjQueryをタブにドーン!!!!です。

意味が分からない?期待して待て、続報☆

  • このエントリーをはてなブックマークに追加

コメント一覧

46 Responses to [IE6用透過png対応策、DD_belatedPNGの使用法と注意点]

fantastic0924 より:

2009/04/30 8:19 AM

smknさん

はじめましてfantastic0924と申します。
web業界歴一年とチョットの初心者です。現在ポートフォリオサイト作ってまして透過PNGを背景に使用すると、、でましたIE6です。表示されません。
それで色々と探っていましたとこと、smknさんの記事にたどり着きました。見事問題は解決されました。本当に感謝しています。有難うございました。respect!

smkn より:

2009/04/30 11:05 AM

>fantastic0924 さま
コメントありがとーございますっ!
お役に立てたなら光栄です☆
画像処理もCSSレンダリングも悪意の塊のようなIE6ですが、それでもシェアは無視できませんからね。。。
お互い涙を飲みつつ(笑)、頑張りましょー!

off より:

2009/05/02 6:17 AM

こんにちは。役に立つ記事をありがとうございます。

このように配置したDIV要素のヘッダとフッタに挟まれたにこれを使って透過PNGを背景リピートさせた場合、表示が不安定になるのですがこれはバグですかね?

具体的にはページの再読み込みなどをした場合に、30%位の確率で背景リピートが途中で消えてしまうんですよね。

Windowsの自動更新でIE8に自動アップデートするようになったので、早くIE6がこの世から消えますように(笑)

smkn より:

2009/05/02 12:04 PM

>off さま

お褒めのお言葉、きょーしゅくです!
多分コメント時に書かれた例題が消えてしまってるので何とも言えませんが、前後のDIVを試しに消してみて、ピンポイントで動作確認してみて、それだと問題ないようであれば、CSSかJSの問題だと思います。

もしくは、ページに既にたくさんのJSを読み込ませているならば、そこら辺がぶつかってるか、全て読み込まれる前にDDさんが動作しちゃってるか。

なんにせよ、IE6が悪い子なのに変わりありませんが(笑)。

tomo より:

2009/06/17 2:45 PM

初めまして!あまりの衝撃と喜びで書きこみします。
この紹介記事のおかげで、今までできなかったpngの
背景くり返しパターンが簡単にできるようになりました!

ほんとにありがとう!感謝です!

ぴえ より:

2009/07/28 3:31 PM

へー、探せばあるもんですねぇ。
便利、便利。

すじ より:

2009/08/07 8:12 PM

これは便利!!と思ったんですが、ウインドウをリサイズすると(透過部分が動くと?)IEで激しくちらつきます…
うちだけでしょうか。

うーん、ほかのライブラリはどうだったか覚えてないですが、もしかして透過系はみんなこうだったかな?
惜しいです。

wqce-web quarity create expression- より:

2009/08/08 12:09 PM

[…] 詳しい使い方はITキヲスクさんの IE6用透過png対応策、DD_belatedPNGの使用法と注意点で解説されているのでご参考に。 カテゴリ:IE6対策タグ: DD_belatedPNG.js, […]

links for 2009-10-15 | ウェブル より:

2009/10/16 5:03 AM

[…] ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点 (tags: png IE) […]

Ryan より:

2009/11/02 12:11 AM

これは使い勝手がよくていいですね。
ただ一つ残念なのは、offさんも似たことをおっしゃってますが、途中で背景が消える場合があるってことですね。

私の環境では途中でグーグルアドセンスを表示させる部分で背景が途切れます。
リロードするとたまに表示される場合もあるんですが、殆どだめですね。
恐らくはJsのバッティング(?)的なことなんでしょうね。
私はJavascriptは全くわからないので、直せませんが、だれか改造できる人いないかな~なんて・・w

usa より:

2009/12/08 9:10 AM

とっても助かりました!ありがとうございます。

ところで、IEで背景に降らせる透過の雪png画像はきちんと透過できるのですが
、#mainのbgがIE6で透過になりません・・・
head内の書き方がわるいのかな?

「()の中のcssな書き方」ってこれで間違ってるから反映されないのですよね?
助けてください。
div id=mainのbg画像を透過したいのです。

DD_belatedPNG.fix(‘img,main’);

全体の背景はfixedでjpegなのですが関係ないですよね。

smkn より:

2009/12/08 11:33 AM

>usa さん

どもども、ありがとーございます!

早速ですが、問題の原因は恐らく仰るとおり、「CSSの書き方」だと思いますよー。
通常のCSSと同じく、idを指定するには # を、classには . が必要になります。
このページでのサンプルコードでいうなら
DD_belatedPNG.fix(‘img, .png_bg’); ってのは
「img要素と、クラス名”png_bg”にDDを対応させなさいよね」って意味になります。

長くなりましたが、多分headの部分に
DD_belatedPNG.fix(’img,#main’);という風に
id名#を書き足してみてくださいなー♪

[…] 仕事でよく「IE6に対応するのはそろそろやめようよ・・・」とか「IE6消えてしまえばいいのに」とかよく言いますし、「DD_belatedPNGが神すぎてスゲー※」とか騒いだりします。 ※DD_belatedPNGについてはこちら。 […]

[…] 解説サイト […]

なごり雪 – You are in rock より:

2010/02/12 10:31 PM

[…] IE6用透過png対応策、DD_belatedPNGの使用法と注意点 […]

[…] はじめてのことだったので、「ITキヲスク」様のサイトを参考にしつつやってみました。 […]

usa より:

2010/03/29 2:43 AM

解答ありがとうございました!

解答見るまえに、#mainの中にbg_pngというクラスを作って、
そこを透過画像をbg指定して凌いでいました(@@;)

今度は、head内のとこで#つけたid指定してやってみます!

[…] IE6用透過png対応策、DD_belatedPNGの使用法と注意点(ITキヲスク) […]

[…] 実装できるライブラリ。class名等を指定します。リピートにも対応。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 合わせて読みたい:DD_belatedPNGを使ってる場合でもスマートロールオ […]

VIVREE - IE6 透過PNG対策 JavaScript偏 より:

2010/06/01 12:22 PM

[…] ITキオスク コメント (0) […]

[…] ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点 […]

[…] >> 詳細な使用法と注意点を追加エントリーしました。 […]

背景repeatでiepngfix « PARKN' PARK より:

2010/08/31 9:46 AM

[…] 【参考】 IE6用透過png対応策、DD_belatedPNGの使用法と注意点     こういうとき毎回思うけど、、、 なんか調べ物してていいもの見つけても、 できるのは大変うれしいけど js内見てもちん […]

cs より:

2010/11/06 9:10 PM

はじめまして
今回IE6のPNG透過に悩まされています。

画像リンクの方法を再現しようとしましても上手く行きません^^;

IE6のテスターで、動作確認しますと透過されません><;
透過のみだけでしたら、平気なようなのですが。

#rollover01 {width:○○○px;height:○○○px;}

→このCSSにdisplay: block;を足したのが原因でしょうか?

head内

DD_belatedPNG.fix(‘img, .png_bg’);

body内

css内
#rollover01 {width:520px;height:520px;}
a#rollover01:link {background-image: url(images/xxx.png);}
a#rollover01:visited {background-image: url(images/xxx.png);}
a#rollover01:hover {background-image: url(images/xxx_on.png);}
a#rollover01:active {background-image: url(images/xxx_on.png);}

です、どこか間違ってますでしょうか?^^;
お手数ですが、教えていただけると大変助かります。

smkn より:

2010/11/07 6:05 AM

>cs さん

ご来場ありがとーございますーw
さっそくですが、body内のhtmlが消えちゃってるので何とも言えませんが、a要素に class=png_bg って書いてあれば、特に書き方的には問題なさそうですねー。
今ちょっと純正IE6の環境が無いので断言はできないんですが、可能性としては、IEがテスターだからか(結構テスターは言うコト聞かない時があります)、どっかに孔明の罠(ものすごい些細なミス)か、あたりじゃないかと。
あんまお役に立てず、申し訳ありません><

yuki9q より:

2010/12/27 11:17 PM

はじめまして!
今回どうしてもpng画像を使いたく詰まっていたところでたどりつきました。とても助かりました。ありがとうございます。
最近web等についてblogを書き始めたのですが、エントリーの方に参考としてURLを貼っても構わないでしょうか?

smkn より:

2010/12/28 3:20 AM

>yuki9q さん

はじめましてー!お役に立てて光栄でございます☆
URLの件、全く問題ないですよー♪むしろお気遣いありがとございますm(_ _)m

それにしてもテクスチャーの使い方すごい上手ですねー!web系らしくない(もちろんいい意味で!)、あったかい雰囲気で。

今後ともよろしくお願い致しますです!

nisshin より:

2011/01/21 7:41 PM

はじめまして

DD_belatedPNG.js、さっそく導入しました。
おおっ、いいじゃん。
と思ったのも束の間、

【html】

ああああ

いいいいい

【css】
#test{
margin:50px auto;
width:500px;
}
.top{background-color:#99FF33;}
.middle{background-color:#FFFF99;}
.bottom{background-color:#00FFFF;}

↑こういう風に書くと、
「#testの上margin:50px」がie6で無視されるんですね。
またお前かと。
苦し紛れに#testの上に空divを入れるとなぜか解決…

う~ん。。
みなさんおっしゃる通り、ie6がこの世から消えてくれれば
大勢の人が幸せになれるのに…

Weekly Digest for March 10th | BiscuitJam Blog より:

2011/03/10 12:05 PM

[…] Shared ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点. […]

[…] ■DD_belatedPNG.js 配布元:http://dillerdesign.wordpress.com/ 参考サイト:ITキヲスク […]

IE(6-8)のCSS3、透過png対策 « mimumemo より:

2011/06/29 3:33 PM

[…] る点は、背景の透過pngにも使えるというところです。 使用方法等はITキヲスクさんのカンペキな記事を参考にしてください。 ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点 […]

buchi より:

2011/07/05 5:59 PM

別のjsを使っていたのですが、不具合が出たので乗り換えました。
問題なくpngが表示されて助かりました!
ありがとうございます。

smkn より:

2011/07/09 11:25 PM

>buchi 様
お役に立てたようで、なによりです☆

png より:

2011/07/25 5:19 PM

jsを使用させていただいています。
何人かの方がおっしゃっていますが、IE6で特定のページだけ
背景が下までリピートしないで、途中で途切れてしまいます。
試しにjsを切ったところ直りました。こちらの改善策はありませんでしょうか?

png より:

2011/07/26 6:33 PM

追記です。
clearfixのクラスをfirefoxでとってみたところ、
IE6の背景が下までリピートしない状態と同じ表示になりました。
もしかすると、clearfixとddのクラスを同じdivにかけていると、問題なのでしょうか。

smkn より:

2011/07/27 4:08 PM

> png 様
コメントありがとーございますっ!
背景リピートの諸問題に関しては、自分もちょっと原因が分かりません><
多分バグ報告として作者様の方にも上がってると思うので、もしかしたら今後改善されるかもしれないですが、現状では涙を飲んで甘受するしかなさそうです。
お力になれず申し訳ありませんm(_ _)m

[…] うか、透過しない)、これも便利なスクリプトが用意されています。 これについてはこちらを参考にサせていただいています。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 head内に […]

[…] IE6用透過png対応策、DD_belatedPNGの使用法と注意点 関連記事 […]

[…] ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点 […]

may27 より:

2012/04/27 7:17 PM

参考にさせていただきました。
本jsを導入し、うまく表示できたかに思えたのですが、背景ではなく直接imgタグで透過pngを読み込んでいる時に、IE8でブラウザ側で拡大をかけると、画像自体が拡大されなければいけないところ、まるで背景画像のrepeatがかかったかのような表示になってしまいました。。
結局別の対策をとり難を逃れましたが、利点が欠点になってしまうとは…

[…] うか、透過しない)、これも便利なスクリプトが用意されています。 これについてはこちらを参考にサせていただいています。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 head内に […]

[…] IE6透過表示に対応するPNG画像へ変換する「ImageAlpha」が凄い Javascript Web ブログ ie6 2012/07/13 Mac使い(10.6 or 10.7)のWeb制作クラスタに朗報。 JavascriptもHTMLもCSSもなんら特別なコードを付け加えることなくIE6で透過表示できるPNGを作るアプリ「ImageAlpha」が凄いです!ただ、完璧とはいえないところもあったのでそれもあわせてご紹介。 ・ ImageAlpha公式サイトからダウンロード→解凍 ※解凍=インストールみたいなものなので解凍後必要に応じてアプリケーションフォルダ等に移動してください ・Photoshop等で作った24bit(32bit)の透過PNGを起動したアプリで読み込ませます。 ※ドラッグアンドドロップでもいいはずですが自分の場合フリーズしたので普通に「ファイル」→「開く」がいいかもです。 「IE6-friendly alpha」をチェックして保存(Cmd + shift + S)することでIE6での透過表示に対応します。 左のサムネイルをクリックすると様々な背景でのなじみ具合を確認できます。 実際に表示させてみた例が↓こちらです。 手抜きでIE6での表示が白背景なので透過できてるかよくわかりませんがとりあえずできてます。ただ、この写真を見てもわかる通りエッジの処理が汚いです。ちなみに同じ画像をIE6以外で見ると元画像と見分けがつかないぐらい完璧に変換できています。 「jQuery.belatedPNG」で完璧な表示を重視するか、このImageAlphaである程度のレベルをクリアしてムダなソースを増やさないことに重きを置くか、というところですね。 この選択肢が増えただけでも自分としては結構な感動なんですがいかがでしょうか? 腐った牛乳と呼ばれ、最近はIE6に対応することがむしろイレギュラーになりつつありますが、自分の周りではまだまだスルーできない存在です。 CSSハックで対応したりIE7.jsで対応したり、様々な方法がありますが、自分は「DD_belatedPNG」を改良した「jQuery.belatedPNG」での対応に落ち着いてましたが、これから場合によってはこのImageAlphaを利用することも増えてきそうです。 ありがたやありがたや(´ω`) […]

[…] works  javascript 2012. 09. 05 偉大なる「DD_belatedPNG.js」 詳しくはこちら このjavascriptはこれまでにない方法で実現する、 […]

[…] ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点 […]

  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Favorite feeds

    Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate