IE6で透過PNG画像を奇麗に表示させる

公開日

透明感のあるデザインをHTMLでコーティングする場合、Internet Explore6(以下IE6)が、透過PNG画像の表示に対応していない事がネックになるケースがあると思います。

下記画像のように透明部分が、グレーで塗りつぶされた形で表示されてしまいますよね。
現在でも、20%位のシェアを持つブラウザなので無視する訳にもいかず、本当にWebデザイナー泣かせです。

Internet Explore6(IE6)での透過PNG表示例

透過PNGがIE6でも使えるとデザインの幅を広げられるので、かなり嬉しいですよね。
IE6で透過PNGを表示させる方法はいくつかありますが、当サイトでは、組み込みが簡単な点や、「img」だけでなく背景等にも対応していること、またWeb標準に準拠したコーディングで利用できることから、「IE PNG Fix v2.0」を利用しています。

手順

1)headタグ内で「iepngfix_tilebg.js」を読み込ませます。
▼記述例(jsフォルダ内にiepngfix_tilebg.jsを配置する例になります)
[html]
<script type="text/javascript" src="js/iepngfix_tilebg.js"></script>
[/html]
これはbackground-position・background-repeatを利用するためみたいです。利用しない場合は必要ないと思います。

2)iepngfix.htcを読み込むCSSをHTMLに記述。
▼記述例(img、div、liタグで透過PNGを使用する例になります)
[html]
<!–[if lt IE 7]>
<style type="text/css">
img, div,li,input { behavior: url(/iepngfix.htc) }
</style>
[/html]

※CSSは外部スタイルシートに記述することも出来ますが、W3Cのチェックでエラーになるため,
HTMLに直接記述しています。

3)iepngfix.htcファイル内、19行目付近にあるblank.gifへのパスを変更します。
例:IEPNGFix.blankImg = ‘http://www.adesignare.com/image/blank.gif’;

以上で完了です。IE6で透過PNG画像が奇麗に表示されます。

ちなみにIE6撲滅キャンペーンはご存知ですか?
WebサイトホスティングサービスのWeeblyが、機能的に時代遅れになっているがシェアが多いためIE6へ対応せざるをえず、その事がWeb企業にとって負担になっているため始めたらしいです。

キャンペーンは何をやるかというと、IE6でページを閲覧した際にブラウザのバージョンアップを促すアラートを表示します。いろんな国向けのHTMLソースがこちらに用意されています。日本語版は下画像の形で表示されます。

IE6撲滅キャンペーン

HTML5だとIE8が足かせになりそうですね。
マイクロソフトには、シンプルでスタンダードなブラウザを開発していただきたいです。


関連記事