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を制する!!

  • [IE][CSS]IEで透過PNGを扱う為のまとめ

    透過PNG と IE と IE7 まとめ
    IE6以前では透過PNG(背景部分が透けてるPNG)の扱いが不適切なままでおかしな画像になります。
    IE7では…

  • ZIM

    管理人様、はじめまして。
    透過pngの適用法を検索しているうちにこちらに辿り着きました。未だie6利用者の方がいらっしゃいますので、こちらの記事でも紹介されている「iepngfix.js」を背景png画像に適用させたいと考えておりますが、なかなか上手く適用されずに困っています。
    例えばリスト表示の先頭に透過pngのボタン(私のサイトですとメニューバーの項目先頭の矢印画像)を設定しようとすると、文字列のエリア分だけ背景png画像が拡大されてしまうのですが、iepngfix.jsを適用させつつ、背景画像のサイズ拡大をうまく防ぐ方法にお心当たりはございませんでしょうか。
    大変恐縮ですが、もし宜しければヒントなりともご教示いただければ幸いです。何卒宜しくお願いいたします。

  • ZIM様
    コメントありがとうございます。サイト拝見させていただきました。カッコいいサイトですね!!
    さて、iepngfix.jsを使って、CSSでbackground指定したPNGの透過の問題ですが、私も一度この壁にぶち当たりました。
    相当試行錯誤しましたが、解決策が見つからず、結局CSSではなく、HTML側で画像を貼り付ける事になりました。(妥協ですね。)
    jQueryや、その他のJavaScriptを使ったPNGを透過させるライブラリを使っても、サイズの問題が発生したので、WindowsのAlphaLoaderの問題な気がします。
    もう少し時間ができたら、詳しく調べてみますね。
    結局、良い回答ができず申し訳ありませんが、HTML側で対応するのが、現状ではベターな気がします。
    IE8のベータが公開されたようですので、早くIE6が淘汰されることを祈りましょう。

  • ZIM

    SCREAMO 様
    大変お忙しい中、お時間を割いてご回答いただきまして誠に恐縮です。心から感謝申し上げます。画像の問題につきましては了解いたしました。かなり根深いものだったのですね。素人が聞き齧りで運営してますので、問題が発生すると延々と自分を疑ってしまいますので、小手先での有効な解決策がないと判っただけでも著しい前進です。
    一応サファリやファイアフォックス、ie7では正常に表示されていますのでie6のためだけにhtmlに手を加えるのは少々辛いところですが、ie8への誘導も含めて少しずつ手を打って参りたいと思います。
    改めて御礼申し上げます。この度は誠にありがとうございました。

  • 久しぶりに「ユンサン」でググったら辿り着きましたw
    遅レスですが、
    丁寧な解説ありがとうございます。
    早くこのような裏技を使わないで済む日が来る事を祈りつつ。。。
    PS:
    このサイトすごくかっこいいですね。

  • ユンサン、コメントありがとうございます。
    iepngfixという、素晴らしいライブラリを作成いただき、感謝しています。
    本当に早くIE6以前は世の中から消滅してほしいところです。まぁ、あと数年は無理でしょうが、iepngfixでなんとか乗り切ることができそうです!!
    本当に、こんな辺境のブログまで来ていただいて、コメントしていただき、ありがとうございました。
    PS: ブログを新しく始められたのですね。早速フィード購読させていただきました!!

  • 帰って来た IEPNGFIX

    あれから一年以上が経つのですね、すっかり忘れてしまう程、普通に使っていたんですけど。
    久々に思い立って(ネタ探しのためにw)、ググってみると、意外とまだ話…

  • どうもです。
    また頑張ってブログ書きますんでよろしくお願いします。

related story