透明感のあるデザインをHTMLでコーティングする場合、Internet Explore6(以下IE6)が、透過PNG画像の表示に対応していない事がネックになるケースがあると思います。
下記画像のように透明部分が、グレーで塗りつぶされた形で表示されてしまいますよね。
現在でも、20%位のシェアを持つブラウザなので無視する訳にもいかず、本当にWebデザイナー泣かせです。
透過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ソースがこちらに用意されています。日本語版は下画像の形で表示されます。
HTML5だとIE8が足かせになりそうですね。
マイクロソフトには、シンプルでスタンダードなブラウザを開発していただきたいです。