透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
December 27th, 2006
先日ご紹介した、「透過PNGをIE6以下のバージョンで綺麗に表示する方法」というエントリーなんですが・・・
意外なほどにアクセスがあり、ありがたいことに、現在このブログの一番の人気エントリーになっております。。。
この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。
この方法では、imgタグに入れられたPNGファイルのみに有効なため。。。上に文字をのせたりすることができませんでした。。。
っちゅうわけで、透過PNGをCSS（スタイルシート）の背景画像としてあつかえたら、さらにさらに便利やのになぁ～。。。なぁ～んて”韓流”プログラマのユンサンにお話してみたところ。。。
ちょいちょいと作ってくれました～！！！
「透過PNG と IE と IE7」
っという、なんだか、「部屋とYシャツと私」的なタイトルのエントリーでご紹介されております！！
このスクリプトを使いますと。。。
ちゅうわけで、肝心のやり方のご説明。（プログラマな方は韓流”プログラマのユンサンの方からどうぞ）
1. iepngfix.jsっちゅうスクリプトをダウンロードしてサーバにアップロード（右クリックで対象を保存で。）
2. 透過PNG画像を表示したいhtmlの<head>から</head>の間に
って書いてiepngfix.jsを読み込みます。
3. CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。
behavior: expression(IEPNGFIX.fix(this));
}
（赤字の部分はPNG画像を指定したクラス名、もしくはID名を）
これで、IE6や5.5のバージョンでも綺麗に透過PNGを、CSS（スタイルシート）で操ることができますね～！
関連ブログ
February 6th, 2007 at 1:57 am
winIEで透過pngを使う方法（メモ）
今ブログのデザイン作成中なんですが、どうしても透過pngを使いたくて、 winI…
February 14th, 2007 at 11:17 am
透過PNG と IE と IE7 まとめ
このブログの中で一番アクセスがあるエントリー「透過PNG と IE と IE7」に追記を書いたのですが、解り難そうなので、ここにまとめときます。 以前のエ…
May 29th, 2007 at 9:08 pm
透過PNG
ホームページで透明感あるページを作る際、グラデーションとドロップシャドウを使う表現はポピュラーですよね。
実際自分のサイトでずーっと透過PN…
June 10th, 2007 at 6:44 pm
半透明PNGをIE6.0以前で表示
IE６．０以前では半透明PNGを使用すると透明にならずに灰色になってしまい正し…
July 2nd, 2007 at 12:51 pm
はじめまして。hiroyuki-incと言います。
いつも楽しく読ませてもらっています。
「透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる」の内容で1つ気になる点がありましたのでメールさせて頂きます。
紹介されていたjsと方法でIE 6で問題なく表示されたのですが、CSSで透過pngを背景指定したブロック要素の中にリンクを含むテキスト、もしくは画像を配置するとリンクが機能しません。(IE 6で上記不具合を確認)
リンクを含むテキストや画像は表示されますが、リンクのみ機能しないという状態です。
もし同じ症状が確認でき、解決方法がお分かりになれば是非教えて頂きたくコメントさせて頂きました。
失礼します。
July 24th, 2007 at 4:10 pm
windows memo
firefoxのブックマークファイル C:\Documents and Settings\[ユーザ名]\Application Data\Mozill…
September 26th, 2007 at 2:35 am
XP&IE6ではきちんと表示されたのですが、98ME＆ie6.02では透過画像が表示されませんでした。
OSに依存する部分があるのでしょうか。
それともPCの設定かなにかでしょうか。
September 26th, 2007 at 7:02 pm
cssでも透過させる方法がわからず探していたら
ありつきました。
そしてできました！とてもとてもありがとうございます！
October 2nd, 2007 at 2:34 pm
tomyさん
コメントどうもありがとうございます。98ME＆ie6.02では表示されなかったのですか・・・もしかするとOSに依存してしまうのかもしれません。もう少し調査してみます。。
オレオさん
コメントどうもありがとうございます。今後ともどうぞ宜しくお願いいたします。
January 31st, 2008 at 3:45 pm
こんにちは。メールフォームが機能しませんでしたので、
こちらで質問させていただきます。
このスクリプトの商用利用は可能でしょうか。
この記事に関連する以前の記事でトラックバック先の方が
ブログで「仕事で必要・・・」というエントリーをしており、
実際使用できるかどうかをしりたくて。。。
よろしくお願いします。
February 5th, 2008 at 11:24 am
ryokoさん
コメントどうもありがとうございます。実際にわたくしがかいたわけではないのですが・・・このScriptのソースコードの先頭にも記載されてるように、CC-GNU LGPLに準拠していれば大丈夫だと思います。
March 3rd, 2008 at 4:37 pm
管理人様
きちんと読むと色々書いてあるんですね・・・。
返信ありがとうございました。（＾＾）
April 2nd, 2008 at 12:26 pm
IE6.0で見たところ、こちらのページでも透過されてないのですが・・・。
周りに水色の枠が表示されています。
PNG透過を探していてたどり着いたのですが、
テスト使用させていただいたところ
Liなどの背景に使用すると、画像が伸びてしまうようです。
こういうところにも使えると良いなあと思ったもので。
（普通使わないのかな？）
May 22nd, 2008 at 7:45 pm
感動してしまいました。。ほんとにありがとうございます。
ユンサン氏に謝辞をお伝えしたいのですが・・・ブログのほうで、コメントが受け付け、されていなくありませんか？
もし機会がありましたら、一人のデザイナーがプルプル震えて感動していたとお伝えください。ありがたく利用させていただきます。
May 23rd, 2008 at 1:38 pm
管理人さんから連絡を頂きました。
ご利用ありがとうございます。
今は別のブログで活動しています。
今後ともよろしくお願い致します。
June 8th, 2008 at 4:47 pm
いつもいろんな記事を参考にさせていただいております。
IE6でのPNG透過に興味があって、こちらのスクリプトを入れてみました。
お役に立つか分かりませんが2点ほど報告したいと思います。
１）スタンドアローン版のIE6では表示されないようでした
（IE6.0.2 WinXP SP2）。
２）スタンドアローン版でないIE6では無事に透過して表示されましたが、
background-positionやbackground-repeatは無視されるようで、
背景指定された領域の中に画像を変形させて全体表示させているようでした。
ひょっとしたら、その領域のpositionやfloatなどが影響
しているのかもしれませんが、ご報告したいと思います。
「ウチじゃそんなことないぞ」というのもありましたら
お聞かせ願えればと存じます。
June 27th, 2008 at 9:29 am
[…] DesignWalkerさんのページで紹介されています […]
June 27th, 2008 at 4:02 pm
tagさん、わたしも同じ状況です。
background-positionやbackground-repeatは無視されるようで、
背景指定された領域の中に画像を変形させて全体表示させているようでした。
解決策はありませんでしょうか？
July 9th, 2008 at 3:32 am
[…] その中でも、透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる …で紹介されている、「iepngfix.js」は結構使いやすいスクリプトなんじゃないかと思います。 […]