福岡のIT系の会社で働くエンジニアのブログです。

技術雑記

[IE][CSS]IEで透過PNGを扱う為のまとめ

Twitter bookmark Facebook LINE Pocket Feedly RSS

透過PNG と IE と IE7 まとめ
透過PNG と IE と IE7 まとめ

IE6以前では透過PNG(背景部分が透けてるPNG)の扱いが不適切なままでおかしな画像になります。
IE7ではある程度直ってるみたいですが。

ソレを回避する為のテクニックが色々ネット上に散らばってたので、まとめて見ました。
まぁいまさらな感はありますが、自分がWebサービスの開発中にこの問題に今頃直面したってことで(^^)

ポイントはIE6のフィルタ機能のAlphaImageLoaderという機能を使うようです。



IEと透過PNG
http://amenti.usamimi.info/ie6png.html

こちらは色々なパターンでAlphaImageLoaderの使い方がのってます。
ただソースの書き方に一工夫がいるのでこのサイトの方法だと既存のサイトに適用するのは少々手直しがいるので手間が要りそうです。

 

ウノウラボ Unoh Labs: IE6でアルファチャンネルを含むPNGを表示する
http://labs.unoh.net/2007/02/ie6_png_fix.html

こちらはPrototype.jsを使うタイプです。
透過PNG表示する為に透過GIFも用意する必要があるので、もう少し簡単になるといいなぁ…と思い、もう少し調べてみました。

 

■[CSS][JavaScript]IE5でアルファチャンネルPNGを使うための一番簡単なライブラリ あるいはIEの失われたテクノロジに驚異せよ
http://d.hatena.ne.jp/nazoking/20070206/1170767765

AlphaImageLoaderをbehaviorhtcを使って実装しているみたいです。
恥ずかしながらbehaviorとかhtcなんて今回はじめて知りました。

 

■[javascript] 僕も半透明 png を使うためのライブラリ作った!
http://d.hatena.ne.jp/amachang/20070206/1170715555

色々な所からリンクされてたのでよさそうだなと思ったんですが、肝心な所がNot Found。うーん。

 

IE PNG Fix - TwinHelix
http://www.twinhelix.com/css/iepngfix/

IE PNG Fix v1.0 RC4というスクリプトがありました。
htcを使うタイプです。
htcは、コンテンツのページと同じドメイン/サーバーに無いとエラーになってしまうようです。
またCC-GNU LGPLというライセンスのため、今回の自分の開発の場合は使えなくて参考程度にしました。

 

アルファ画像を扱うalphafilter.jsライブラリ[to-R]
http://blog.webcreativepark.net/2007/02/01-233315.html

MITライセンスなスクリプトになっているようです。
これでいこうかなと思って試していたら、もう少し自分の事象に当てはまる方法がありました。

 

透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker
http://www.designwalker.com/2006/12/transparent-png.html

透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker
http://www.designwalker.com/2006/12/transparent-png2.html

透過PNG と IE と IE7 まとめ
http://blog.l-xs.com/yungsang/2007/02/png_ie_ie7.html

IEPNGFIX の Tips 1
http://blog.l-xs.com/yungsang/2007/04/iepngfix_tips_1.html

IEPNGFIX の Tips 1 改訂版 + バージョンアップ
http://blog.l-xs.com/yungsang/2007/04/iepngfix_tips_1_1.html

ktkr!!
htcの問題をjsにしてうまく問題を回避しているようです。
また、CSSで透過させたいPNGを指定できるので色々使い回しができそうです。
別のjsとの兼ね合いも有り、今回はこの方法で対応しました。

 

※ 関連記事


Internet Explorer x 透過PNG x CSS
http://www.screamo.jp/2007/09/000019.php

上記のiepngfix.jsを使う方法の詳しい解説記事のようです。
元サイト見てもいまいちわからない人は参考に良いんじゃないでしょうか?

 

IE-winで透過PNGを利用する方法 - Archiva
http://archiva.jp/web/html-css/alpha-channel_on_ie.html

AlphaImageLoaderの解説です。
おまけの記述の所にAlphaImageLoaderを使わないで要素自体を透明化して回避したり、PNG Behaviorを使う方法も紹介されていました。
未確認ですが、場合によっては使えるんじゃないでしょうか?

 

PNG Behavior (WebFX)
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

PNG Behavior for VML Render
http://www.minc.ne.jp/%7Ekonda/web_resoce/js/behavior/png2vml.html

PNG Behaviorという方法も今回はじめて知りました…。
IE独自機能は使わない(使いたくない)という感じで今まで手をつけてなかったです。

 

透明PNG画像をハックなしに異なるブラウザで表示 | caramel*vanilla
http://caramel-tea.com/2006/05/no_hack_png/

画像の加工に一工夫してそれなりにどのブラウザでも見られる方法です。
場合によっては手軽で良いかも。

っていうか、twitterって、いろんな使い方されてるのね、皆さん。
ブログ代わりだったり、なんとかかんとか。
http://caramel-tea.com/2007/07/reblog_pipes/

自分はなんとなくアカウントとった後、ほぼ完全に放置してるなぁ…。
そのうちなんかしてみよっと。

Twitter bookmark Facebook LINE Pocket Feedly RSS