透過PNGをIE6以下のバージョンで綺麗に表示する方法
IE7では、やっとこさ標準でサポートされた、透過PNGですが、まだまだIE6以下のバージョンを使ってるユーザーが多いっちゅうわけで、透過PNGを使わないデザイナーさんが多いようですが。。。
透過GIFだと、角を丸くしたりすると曲線がギザギザに表示されて、非常に汚くなってしまいます。。
これまでは。。。↓こんな感じになってしまってました。。
上の↑のサンプルは背景を黒にして、透過GIFを貼り付けた例ですわ。汚いですねぇ。。。
っちゅうことで。。↓こんな感じにしてみました。。
上の↑のサンプルは背景を黒にして、透過PNGを貼り付けた例ですわ。
普通に透過PNGを貼り付けただけだと、IE6以下のバージョンでは、うまく表示されないようなので。。。
この↓JavaScriptを使いますねん。(右クリックで保存してくだされ）
んでもって、ダウンロードしたpngfix.jsファイルをアップロードして、htmlの<head>から</head>の間に以下のコードをコピペ。
透過PNGだと、アルファの部分も綺麗に表示されるので、デザインの幅もかなり広がりそうですねぇ～。
早速使おっと。
|
|
|
12月 18th, 2006 at 5:00 PM
透過PNGをwebサイトに組み込む
以前書いた透過PNGの記事にトラックバッ…
12月 21st, 2006 at 11:20 PM
透過PNGをIE6以下のバージョンで綺麗に表示する方法 – デザインウォーカー | DesignWalker – ロサンゼルスで働くウェブデザイナーの日記
透過PNGをIE6以下のバージョンで綺麗に表示する方法 – デザインウォーカー …
12月 25th, 2006 at 1:22 AM
winIEで透過pngを使う方法（メモ）
今ブログのデザイン作成中なんですが、どうしても透過pngを使いたくて、 winI…
12月 29th, 2006 at 11:43 AM
ありがとうございます。
いろいろ試行錯誤の上、無事ＩＥ６での動作を確認しました。
いやいや、すごいですね。確かに、スクリプトのソースを呼んでみれば、ブラウザのバージョンを取得したり、条件分岐で処理したりと、らしきことをやっております。
ありがとうございます！！
1月 3rd, 2007 at 3:17 PM
フィヨルドさん
わざわざコメントいただきまして、どうもありがとうございます～。
こっちの記事では、CSSで透過PNGを綺麗に表示する方法をご紹介しておりますので、ご参考にどうぞ～。
1月 9th, 2007 at 12:18 AM
重宝させてもらえそうです！
が・・・、IE7をいったん導入してしまうと、IE6以下で確かめようがないのですが、なにかしら方法はございますでしょうか？
1月 9th, 2007 at 3:01 PM
makiさん
コメントどうもありがとうございます～。
「IE（インターネット・エクスプローラー）前のバージョンを同時に起動させてみる。」っちゅう記事を書いてみました。ご参考にどうぞ～。
1月 10th, 2007 at 9:31 AM
記事ありがとうございました。
早速いくつかのバージョンで確認してみました。
が、残念ながらPNGは綺麗に表示できてませんでした。。。
なんででしょう？ とりあえず試行錯誤してみます。
1月 11th, 2007 at 1:54 PM
makiさん
ご連絡どうもです。
確かに・・・IE5.5以下のバージョンでは、このスクリプトは、うまく動作しないようです。。。「透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる」←こちらのスクリプトでは、うまく動作してるのですが・・・
4月 27th, 2007 at 2:58 PM
IE6で透過PNGを使う
IE6では、透過PNGが透過になりません。
GIFにするには、手間もかかるし、ギザギザ感が出てしまいます。
仕事で、どうしても対応が必要…。
…
6月 24th, 2007 at 1:49 AM
ライブラリ依存のなしで、IE6で透明PNGを表示させる
ここにかなり使えるライブラリを発見。
すごいなぁ。やっぱりデザインの良いサイトはやっている人がすごいんだよなぁ、とか偏見めいたこと思いつつさっそく利用…
7月 2nd, 2007 at 4:41 AM
IE6 で透過 PNG を綺麗に出力する。
IE6 で透過 PNG を表示する方法の中で一番使ひ易いかも知れ無い。
4月 20th, 2008 at 12:20 AM
透過PNGのIE6対策にはこのJava Script…
です。
透過PNGはIE7で正式対応したものの、まだまだユーザーの多いIE6。
そんなIE6ですが、2/13以降にはWindows XPの自動アップデイトでIE7へのアップグレードをするようになるらしいですがそれでも当分はIE……
4月 28th, 2008 at 4:48 PM
ありがとうございました。
透過できました！！
5月 22nd, 2008 at 7:38 PM
スクロールで楽しもう！！…
今回紹介させていただくWEBサイトはThe portfolio of Bryan Katzel。
非常に遊び心が満載ですね。これどうなってるのかな？…
6月 3rd, 2008 at 4:29 AM
はじめまして。いつも参考にさせていただいてます。
こういう方法を探してました。
とても便利で簡単に使えそうなものをありがとうございます！
が、どうもscriptのリンクがおかしなことになってるようで、
DLできませんでしたTT
お忙しいところすみませんが、修正していただけたらと思います。
7月 17th, 2008 at 9:09 AM
[...] 透過PNGをIE6以下のバージョンで綺麗に表示する方法 [...]
9月 8th, 2008 at 11:41 PM
こちらのページを、ＩＥ６で見させていただきましたが、どうしても背景（大枠の黒ではなく、ＰＮＧの土台の色）がグレーに見えます。
社内でＩＥ６ユーザーの数名にも試してもらいましたが同じです。何が原因なのでしょうか。ＦＩＲＥＦＯＸではちゃんと見えます。
11月 10th, 2008 at 10:17 PM
JavaScriptがダウンロードできません！
Not Foundになってしまうのですが…
12月 26th, 2008 at 4:38 PM
[...] スクリプト必須ですが、これ、次から使おー。 DesignWalker：透過PNGをIE6以下のバージョンで綺麗に表示する方法 imgタグでアルファつこたpngもきれいに表示出来ちゃう。 [...]
8月 28th, 2009 at 5:40 AM
こういう面白い機能があったとは!!!遅ればせながらつい最近知りました！！！ありがとうございます！
ちょっと勉強して使いたいなあと思います！！！
1月 1st, 2010 at 3:46 AM
[...] http://www.designwalker.com/2006/12/transparent-png.html これはpngfixで調べたのですがNOT FOUNDでした… [...]