SEMTechnologyExtraInformationRecommend週間ブックマークカテゴリーなしTutorial200904/01IE6用透過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」自体をダウンロードしないコトには始まりません。0.0.ナントカ」とあるテキスト(ナントカの部分はヴァージョンなので、最新のものを探してください。09年3月29日時点では0.0.7aが最新版となっています。)をクリックしてください。DDシリーズは複数あるので、ちゃんと”belatedPNG”かどうかを確認したらいいよ。該当記事のショッパナの方にあるリンク(”http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a”とか書いてある部分)をクリック!すると配布用記事の中段辺りに飛ばされます。上にスクロールしてみると、晴れて緑色のボタンがありますので、クリックしてください。※通常版と圧縮版があるかと思いますが、中身を解析したいとかじゃなければフツーに圧縮版(○○○-min.jsの方)で問題ないと思います。プレーンなJavaScriptが表示されます。aかなんかで全てコピーし、新規テキストにでもペーストして、名前を「DD_belatedPNG.js」として保存してください。使用したいhtmlのhead部分に、下記のように記入してください。.png_bg');</script><!&#91;endif&#93;-->ちょっと解説しますと、まず1行目と6行目の文で「IE6にだけ、このスクリプトを実行するよ」と宣言しています。次に、2行目の「○○○」の部分には、DD_belatedPNG.jsを入れたフォルダパスを。.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要素にロールオーバーを設定したい場合、少し注意とコツが必要なんです。指定しても、動きません。ロールオーバーを実現したい場合、下記のようにCSSだけでロールオーバーの動作を再現する設定をしてあげないといけません。{background:url(mouse_off.png);}まずcss側で、ロールオーバーさせる画像のサイズ(widthとheight)を固定します。それから各擬似要素でマウスオーバー時の画像などを指定する方法です。不透明度を操作するJavaScriptには対応していないそうです。jQueryなどでフェードイン/アウトなどを指定しても反応しないのは、仕様の問題のようですね。仕様としては、input要素にも対応していないそうなので、ご利用の際はご注意ください。「DD_belatedPNG.js」を使う最大の利点とも言えるのが、背景にpng画像をリピート描画できるという事。Alpha」がありますが、やはりこちらはDD_belatedPNG.jsに比べて処理が断然重いように感じます。png画像を背景に使用する方法は、いたって簡単です。通常のgif形式やjpg形式の画像と同じように使用できます。top;}まずは背景にpng画像を指定する要素に、head内で設定したクラス名を与えます。あとは他形式の画像と同様に、繰り返すなり繰り返さないなり、絶対配置するなり相対配置するなり、好きにすればいいさ。こちらも仕様上の問題でいくつか注意すべき点があります。忘れてるとハマりそうなのが、body・tr・td要素の背景には使えないという点。id="wrap"></div>などで囲んで、そこに背景を設定する必要があります。あと、どうやらbackground-position:fixed;には未対応の模様です。近日中にweb2.0(笑)なジェネレータを公開したいと思っています。APIのjQueryをタブにドーン!!!!です。【WordPress】AJAXで次ページを読み込む「jQuery.autopager」をWordPressで活用する方法JavaScriptのDateオブジェクトのmonth系が0から始まる仕様に溜飲を下げた雨の午後ユーザーエージェントで携帯電話(主要3キャリア)とそれ以外を振り分ける方法、まとめてみました。第4引数に「文字列をまるめた後に付加する文字列を指定」する際、色々気を付けないと文字化けるよ、というお話。AMsmknさんはじめましてfantastic0924と申します。web業界歴一年とチョットの初心者です。現在ポートフォリオサイト作ってまして透過PNGを背景に使用すると、、でましたIE6です。それで色々と探っていましたとこと、smknさんの記事にたどり着きました。見事問題は解決されました。本当に感謝しています。画像処理もCSSレンダリングも悪意の塊のようなIE6ですが、それでもシェアは無視できませんからね。役に立つ記事をありがとうございます。このように配置したDIV要素のヘッダとフッタに挟まれたにこれを使って透過PNGを背景リピートさせた場合、表示が不安定になるのですがこれはバグですかね?具体的にはページの再読み込みなどをした場合に、30%位の確率で背景リピートが途中で消えてしまうんですよね。さまお褒めのお言葉、きょーしゅくです!多分コメント時に書かれた例題が消えてしまってるので何とも言えませんが、前後のDIVを試しに消してみて、ピンポイントで動作確認してみて、それだと問題ないようであれば、CSSかJSの問題だと思います。ページに既にたくさんのJSを読み込ませているならば、そこら辺がぶつかってるか、全て読み込まれる前にDDさんが動作しちゃってるか。なんにせよ、IE6が悪い子なのに変わりありませんが(笑)。PM初めまして!あまりの衝撃と喜びで書きこみします。PMへー、探せばあるもんですねぇ。PMこれは便利!!と思ったんですが、ウインドウをリサイズすると(透過部分が動くと?)IEで激しくちらつきます...うちだけでしょうか。うーん、ほかのライブラリはどうだったか覚えてないですが、もしかして透過系はみんなこうだったかな?惜しいです。AMこれは使い勝手がよくていいですね。一つ残念なのは、offさんも似たことをおっしゃってますが、途中で背景が消える場合があるってことですね。私の環境では途中でグーグルアドセンスを表示させる部分で背景が途切れます。リロードするとたまに表示される場合もあるんですが、殆どだめですね。Jsのバッティング(?)的なことなんでしょうね。AMとっても助かりました!ありがとうございます。ところで、IEで背景に降らせる透過の雪png画像はきちんと透過できるのですが、#mainのbgがIE6で透過になりません・・・head内の書き方がわるいのかな?「()の中のcssな書き方」ってこれで間違ってるから反映されないのですよね?助けてください。id=mainのbg画像を透過したいのです。DD_belatedPNG.fix(‘img,main’);全体の背景はfixedでjpegなのですが関係ないですよね。さんどもども、ありがとーございます!早速ですが、問題の原因は恐らく仰るとおり、「CSSの書き方」だと思いますよー。「img要素と、クラス名”png_bg”にDDを対応させなさいよね」って意味になります。PMはじめまして今回IE6のPNG透過に悩まされています。画像リンクの方法を再現しようとしましても上手く行きません^^;IE6のテスターで、動作確認しますと透過されません><;透過のみだけでしたら、平気なようなのですが。url(images/xxx_on.png);}です、どこか間違ってますでしょうか?^^;お手数ですが、教えていただけると大変助かります。書いてあれば、特に書き方的には問題なさそうですねー。今ちょっと純正IE6の環境が無いので断言はできないんですが、可能性としては、IEがテスターだからか(結構テスターは言うコト聞かない時があります)、どっかに孔明の罠(ものすごい些細なミス)か、あたりじゃないかと。PMはじめまして!今回どうしてもpng画像を使いたく詰まっていたところでたどりつきました。ありがとうございます。_)mそれにしてもテクスチャーの使い方すごい上手ですねー!web系らしくない(もちろんいい意味で!)、あったかい雰囲気で。PMはじめましてDD_belatedPNG.js、さっそく導入しました。「#testの上margin:50px」がie6で無視されるんですね。苦し紛れに#testの上に空divを入れるとなぜか解決...う~ん。PM別のjsを使っていたのですが、不具合が出たので乗り換えました。問題なくpngが表示されて助かりました!ありがとうございます。PMjsを使用させていただいています。何人かの方がおっしゃっていますが、IE6で特定のページだけ背景が下までリピートしないで、途中で途切れてしまいます。試しにjsを切ったところ直りました。clearfixのクラスをfirefoxでとってみたところ、IE6の背景が下までリピートしない状態と同じ表示になりました。すると、clearfixとddのクラスを同じdivにかけていると、問題なのでしょうか。様コメントありがとーございますっ!背景リピートの諸問題に関しては、自分もちょっと原因が分かりません><多分バグ報告として作者様の方にも上がってると思うので、もしかしたら今後改善されるかもしれないですが、現状では涙を飲んで甘受するしかなさそうです。PM参考にさせていただきました。本jsを導入し、うまく表示できたかに思えたのですが、背景ではなく直接imgタグで透過pngを読み込んでいる時に、IE8でブラウザ側で拡大をかけると、画像自体が拡大されなければいけないところ、まるで背景画像のrepeatがかかったかのような表示になってしまいました。linksDropboxデバイスを選ばないオンラインストレージ。tenpu無広告のおしゃれなファイル転送サービス。ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。aguse.jpURLからサーバやドメイン管理者などを取得。SimilarWeb競合サイト解析ツール。Fontsの全フォントを任意の文字で一覧化。Insightsサイトの読み込み時間と問題箇所をスコア化。LookupHTML特殊文字を類似文字から逆引き出来るサービス。Regexpreg_matchのマッチング結果を出力。Mail時間延長可能なワンタイムメールサービス。ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。Akinator頭に浮かべた人物を当てる超能力サービス。thisこのブログはウェブデザインやプログラミングなどをはじめ、web制作者向けの様々な技術や情報を掲載しています。現・フリーランスwebクリエイター。verb」として、フルスタックフリーランスやってます。