Internet Explorer x 透過PNG x CSS

Webの世界になかなか浸透しない「PNG」フォーマット。理由は簡単で、世の中でもっとも利用されているブラウザ、Internet Explorer 6以下が中途半端にサポートしていて、利用する利点を見いだせないことにある。中途半端とは、PNGファイル自体は表示はするけれども、透過情報(アルファチャンネル)を扱うことが出来ず、無視して表示してしまうため、普通にJPEGフォーマットやGIFフォーマットを利用した場合と変わらないからだ。Internet
Explorer 5.5〜6で、PNGファイルの透過情報を扱わせるようにする裏技的なものは多々存在するが、どれもバグがあったり、実装面で現実的ではなく、扱いにくいものが多かった。だが最近はだいぶ実用的な方法も開発され、敷居が下がってきている。その中で、よりシンプルで弊害が少ない方法を発見したので紹介しよう。

JavaScript – iepngfix.js

もの凄くストレートなネーミングでわかりやすいJavaScript。これを利用することにより、Internet Explorer 6ばかりか、Internet
Explorer 7のPNGフォーマットの問題を解決してくれる。基本的にInternet Exploer 7は、PNGフォーマットの透過情報を扱うことが出来るが、エフェクトをかけた場合に、透過情報をうまく扱えないと、作者のユンサンは述べている。最近はJavaScriptで、表示画像にドロップシャドウをつけたり、Lightboxのように凝った表示方法を施す場合があるので、この対処は嬉しい限り。とても有り難いです。

この「iepngfix.js」は、冒頭で述べたとおりJavaScriptで、スタイルシートと組み合わせて使う。よって、imgタグを使って、HTML直に画像を貼り付けていた場合や、スタイルシートで背景画像として透過PNGを表示させる場合にも、しっかり透過してくれるので大変便利だ。

【1】インストール

利用方法は、とってもスタンダード。まず作者のユンサンのブログのエントリー「透過PNG
と IE と IE7」
から、「iepngfix.js」をダウンロード。そのJavaScriptをサーバにアップロードして、透過PNGを表示させるページにJavaScriptを読み込ませる。<head>〜</head>の間に追加するようにしよう。

<script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>

次にスタイルシートに以下のスタイルを定義させる。

.iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}

対象ブラウザがInternet Explorerなので、コメントアウトを利用したハックを使ってもいい。その場合には、<head>〜</head>の間に下記のように追加する。

<!--[if IE]>
<script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>
<style type="text/css">
.iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
</style>
<![endif]-->

なぜ<!–[if IE]>〜<![endif]–>の間にスタイルを書き込んでいるかというと、とコメントアウトのハックを利用している際に、定義したスタイルをInternet
Explorer以外のブラウザに読み込ませた場合、エラーになることがある。なぜかというと、上記で定義したスタイルは「iepngfix.jsを読み出せ!」と命令している。Internet
Explorer以外のブラウザはコメントアウト・ハックを書き込んでいる場合「iepngfix.js」を読み込んでいないために探し出すことができないからだ。なのでコメントアウト・ハックを利用している場合は、JavaScriptとスタイルの読み込みをセットで書き込んでおく。

【2】使い方

HTML、またはHTML + スタイルシートにJavaScriptを読み込ませ、スタイル定義までを済ませたら、あとの作業は簡単だ。PNGフォーマットの画像ファイルをimgタグ、またはスタイルシートのバックグラウンドで表示させる場合、iepngfixとクラスまたはID定義するだけだ。

imgタグで表示させる場合

<img src="sample.png" width="100" height="100" class="iepngfix" />

スタイルシートのバックグラウンドで表示させる場合

<div class="iepngfix">〜</div>

以上でInternet Explorerで透過したPNGフォーマットの画像ファイルを、綺麗に表示させることができる。

【3】応用

上記では仮にスタイルを「iepngfix」としたが、ここの名称はなんでも良い。少々アグレッシブだがimgタグすべてを透過させたい場合、下記のようにスタイル定義するのアリだ。

img {
behavior: expression(IEPNGFIX.fix(this));
}

SCREAMOでは、エントリー部分の画像にPNGを使う場合が多く、エントリー部分は<div class=”entry-detail”>〜</div>で囲ってあるので、下記のようにスタイル定義している。(本当はもっと複雑にしているけど)

div.entry-detail img {
behavior: expression(IEPNGFIX.fix(this));
}

以前にエントリーした「CSS Browser Selector」を利用して、Internet Explorer 6,7 だけに適応されるように、下記のようにしてみるのもいい。

.ie6 div.entry-detail img, .ie7 div.entry-detail img {
behavior: expression(IEPNGFIX.fix(this));
}

複雑なWebデザインを実現可能に

Internet ExplorerでPNGフォーマットの透過情報が正常に扱えるようになると、どのようなメリット、デメリットがあるだろう。メリットは複雑なWebデザインが容易になる事だ。スタイルシートでクラス定義すれば、簡単に透過情報を扱えるようになるために、様々な手法が使える。たとえばPositioningを利用して、複数の画像を重ね合わせて表現するWebデザインを、簡単に実現できるようになったり、背景を気にしなくても良くなるために、画像の生成が容易になり工数が省ける。

デメリットは、やはり動作が重くなることだろう。1ページに数十のPNGファイルを読み込ませた場合、きっと恐ろしいほど動作が鈍くなるはずだ。なので、現状では要所要所で利用していくしかない。また、未知のバグが発生する可能性がある。それはそもそもInternet
Explorerの作りが、非モダンで作りが甘すぎるのが原因であり、PNGフォーマットが悪いわけではなく、完全にMicrosoftが悪い。しかもInternet
Explorer 6はブラウザ・シェアの大半を占めていて、透過情報の扱いに問題があるInternet Explorer 7も今後シェアが増えていく事を考えると、本当に頭が痛くなる。

つまりは、この「iepngfix」を利用する場合に限ったことではないが、PNGファイルを読み込ます際に、プロパティを変更したり、エフェクトをかける場合は、厳密なチェックが必要だ。是非、各ブラウザでの動作チェックは念入りにしてほしい。

PNGフォーマットを制する者はWebを制する!!

related story