ホームページづくりに興味のない人にとっては「なんのことやら」
かもしれませんが、IE(Internet Explorer)で透過PNGを実現する方法
についてです。
PNGというのはjpegやgifと同じく、画像のフォーマットの種類なのですが、
PNGには、色の情報と一緒に「透明度」の情報をもたせることができます。
なので、半透明のPNG画像を使ってWEBページを作ると、非常に透明感
のある美しいデザインを実現することができるのです。
透過をきれいに使ったウェブデザインいろいろ
ただ、この透過PNGはIE6(Internet Explorer6)以前では対応しておらず、
透過させた部分が灰色に表示されてしまいます。
しかし、iepngfix.htc
というものを使うと、IE6でも透過PNGが使えるのです！
使い方は簡単で、適当な場所にiepngfix.htcをおいたあとに、
透過させたい画像にこんな感じでスタイルを適用するだけ↓
img{ behavior:url(iepngfix.htc); }
ただ、1点だけ注意点が。
「ウェブのつながらないローカル環境で制作中」
「imgタグにiepngfix.htcを適用」
するときは、
１．blank.gif を適当なところに配置。
２．iepngfix.htc の14行目あたりを編集して、blank.gifまでの
Pathを記入。 例： var blankImg = 'img/blank.gif';
を忘れずに行わないと、imgを配置した箇所に
「画像なしを表す×マーク」が画像の上に表示されてしまいます。
ディフォルトでは外部サーバーからblank.gifを読み込んでいるので
オンライン上では正しく表示されるのですが、
xamppなどでローカルにテスト環境を構築しており、かつそのＰＣが
ネットにつながっていない場合は自前に用意したblank.gifを
読み込まないとなりません。
さあ、これであなたも、IE６に悩まされることなく、
楽しい透過PNGライフがおくれるはずです！