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