透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
先日ご紹介した、「透過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（スタイルシート）で操ることができますね～！
関連ブログ
|
|
|
2月 6th, 2007 at 1:57 AM
winIEで透過pngを使う方法（メモ）
今ブログのデザイン作成中なんですが、どうしても透過pngを使いたくて、 winI…
2月 14th, 2007 at 11:17 AM
透過PNG と IE と IE7 まとめ
このブログの中で一番アクセスがあるエントリー「透過PNG と IE と IE7」に追記を書いたのですが、解り難そうなので、ここにまとめときます。 以前のエ…
5月 29th, 2007 at 9:08 PM
透過PNG
ホームページで透明感あるページを作る際、グラデーションとドロップシャドウを使う表現はポピュラーですよね。
実際自分のサイトでずーっと透過PN…
6月 10th, 2007 at 6:44 PM
半透明PNGをIE6.0以前で表示
IE６．０以前では半透明PNGを使用すると透明にならずに灰色になってしまい正し…
7月 2nd, 2007 at 12:51 PM
はじめまして。hiroyuki-incと言います。
いつも楽しく読ませてもらっています。
「透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる」の内容で1つ気になる点がありましたのでメールさせて頂きます。
紹介されていたjsと方法でIE 6で問題なく表示されたのですが、CSSで透過pngを背景指定したブロック要素の中にリンクを含むテキスト、もしくは画像を配置するとリンクが機能しません。(IE 6で上記不具合を確認)
リンクを含むテキストや画像は表示されますが、リンクのみ機能しないという状態です。
もし同じ症状が確認でき、解決方法がお分かりになれば是非教えて頂きたくコメントさせて頂きました。
失礼します。
7月 24th, 2007 at 4:10 PM
windows memo
firefoxのブックマークファイル C:\Documents and Settings\[ユーザ名]\Application Data\Mozill…
9月 26th, 2007 at 2:35 AM
XP&IE6ではきちんと表示されたのですが、98ME＆ie6.02では透過画像が表示されませんでした。
OSに依存する部分があるのでしょうか。
それともPCの設定かなにかでしょうか。
9月 26th, 2007 at 7:02 PM
cssでも透過させる方法がわからず探していたら
ありつきました。
そしてできました！とてもとてもありがとうございます！
10月 2nd, 2007 at 2:34 PM
tomyさん
コメントどうもありがとうございます。98ME＆ie6.02では表示されなかったのですか・・・もしかするとOSに依存してしまうのかもしれません。もう少し調査してみます。。
オレオさん
コメントどうもありがとうございます。今後ともどうぞ宜しくお願いいたします。
1月 31st, 2008 at 3:45 PM
こんにちは。メールフォームが機能しませんでしたので、
こちらで質問させていただきます。
このスクリプトの商用利用は可能でしょうか。
この記事に関連する以前の記事でトラックバック先の方が
ブログで「仕事で必要・・・」というエントリーをしており、
実際使用できるかどうかをしりたくて。。。
よろしくお願いします。
2月 5th, 2008 at 11:24 AM
ryokoさん
コメントどうもありがとうございます。実際にわたくしがかいたわけではないのですが・・・このScriptのソースコードの先頭にも記載されてるように、CC-GNU LGPLに準拠していれば大丈夫だと思います。
3月 3rd, 2008 at 4:37 PM
管理人様
きちんと読むと色々書いてあるんですね・・・。
返信ありがとうございました。（＾＾）
4月 2nd, 2008 at 12:26 PM
IE6.0で見たところ、こちらのページでも透過されてないのですが・・・。
周りに水色の枠が表示されています。
PNG透過を探していてたどり着いたのですが、
テスト使用させていただいたところ
Liなどの背景に使用すると、画像が伸びてしまうようです。
こういうところにも使えると良いなあと思ったもので。
（普通使わないのかな？）
5月 22nd, 2008 at 7:45 PM
感動してしまいました。。ほんとにありがとうございます。
ユンサン氏に謝辞をお伝えしたいのですが・・・ブログのほうで、コメントが受け付け、されていなくありませんか？
もし機会がありましたら、一人のデザイナーがプルプル震えて感動していたとお伝えください。ありがたく利用させていただきます。
5月 23rd, 2008 at 1:38 PM
管理人さんから連絡を頂きました。
ご利用ありがとうございます。
今は別のブログで活動しています。
今後ともよろしくお願い致します。
6月 8th, 2008 at 4:47 PM
いつもいろんな記事を参考にさせていただいております。
IE6でのPNG透過に興味があって、こちらのスクリプトを入れてみました。
お役に立つか分かりませんが2点ほど報告したいと思います。
１）スタンドアローン版のIE6では表示されないようでした
（IE6.0.2 WinXP SP2）。
２）スタンドアローン版でないIE6では無事に透過して表示されましたが、
background-positionやbackground-repeatは無視されるようで、
背景指定された領域の中に画像を変形させて全体表示させているようでした。
ひょっとしたら、その領域のpositionやfloatなどが影響
しているのかもしれませんが、ご報告したいと思います。
「ウチじゃそんなことないぞ」というのもありましたら
お聞かせ願えればと存じます。
6月 27th, 2008 at 9:29 AM
[...] DesignWalkerさんのページで紹介されています [...]
6月 27th, 2008 at 4:02 PM
tagさん、わたしも同じ状況です。
background-positionやbackground-repeatは無視されるようで、
背景指定された領域の中に画像を変形させて全体表示させているようでした。
解決策はありませんでしょうか？
7月 9th, 2008 at 3:32 AM
[...] その中でも、透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる …で紹介されている、「iepngfix.js」は結構使いやすいスクリプトなんじゃないかと思います。 [...]
7月 16th, 2008 at 8:07 PM
[...] http://www.designwalker.com/2006/12/transparent-png2.html [...]
9月 18th, 2008 at 11:22 PM
[...] トラックバック先のDesignWalkerさんの記事にある【透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる】と [...]
10月 26th, 2008 at 8:48 PM
[...] 参考サイト 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
11月 15th, 2008 at 8:30 AM
[...] ので、このサイトの方法を使います。 DesignWalker:透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示… [...]
12月 17th, 2008 at 2:50 AM
[...] iepngfix.htcのダウンロードや使い方についてはDesign Walkerさんのサイトで詳しく説明されているので、それをご覧になってください。 [...]
2月 14th, 2009 at 2:03 PM
[...] Design Walker [...]
3月 5th, 2009 at 11:21 PM
透過PNGをIE6以下でも表示できるようにする（背景対応）…
今更・・と思われるかもですが、ちょっと感動したのでメモ。
透過PNG（α値を持ち半透明が表現できる）がIE6以前で表示できない問題を解決する方法が DesignWalker さんのところで紹介され….
7月 16th, 2009 at 4:55 PM
デザインでどうしても透過PNGを使用しないといけないので、参考にさせていただきました。
透過PNGはIE6でも機能したのですが、
cssのfont-weight: bold;
を指定すると、
透過ＰＮＧを指定しないのと比べると文字が太くなってしまっています。
font-weight: nomal;にすると普通に表示されるのですが、デザイン上boldを適用したいんです。
もし同じ症状が確認でき、解決方法がお分かりになれば是非教えて頂きたくコメントさせて頂きました。
失礼します。
10月 2nd, 2009 at 7:13 AM
[...] 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる … [...]
7月 21st, 2010 at 10:59 AM
[...] 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる | DesignWalker [...]