Own products

  • 新規事業のアイディア創造機

Tutorial

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

この記事の読了時間：約6分15秒

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

以前もこの「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部分に、下記のように記入してください。

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

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

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

そして、肝心の４行目。’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をタブにドーン!!!!です。

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

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

関連する記事

同じカテゴリーの記事

コメント一覧

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

fantastic0924 より：

2009/04/30 8:19 AM

smknさん

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

smkn より：

2009/04/30 11:05 AM

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

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で激しくちらつきます…
うちだけでしょうか。

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

Ryan より：

2009/11/02 12:11 AM

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

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

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名＃を書き足してみてくださいなー♪

usa より：

2010/03/29 2:43 AM

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

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

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

cs より：

2010/11/06 9:10 PM

はじめまして
今回ＩＥ6のＰＮＧ透過に悩まされています。

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

ＩＥ6のテスターで、動作確認しますと透過されません＞＜；
透過のみだけでしたら、平気なようなのですが。

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

→このＣＳＳにdisplay: block;を足したのが原因でしょうか？

head内

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

body内

ｃｓｓ内
#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 さん

ご来場ありがとーございますーｗ
さっそくですが、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がこの世から消えてくれれば
大勢の人が幸せになれるのに…

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

may27 より：

2012/04/27 7:17 PM

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

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


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

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate