IE6フレンドリーなPNGを作る方法

    後藤大地  [2008/03/27]

    2007年末ごろからIE8の話題が絶えない。Acid2にクリア、デフォルトレンダリングモードをより標準に準拠したものへ変更ベータ版の提供Webサービスをマッシュアップする機能の提供など、話題には事欠かない状況だ。特にCSSのレンダリングがより標準に準拠することで、これまでとくにIE6で問題になった互換性の問題が軽減されるだろうと胸を撫でおろしている。

    こうした話題の影で忘れかけている(ようとしている?)わけだが、依然としてトップシェアはIE6であり、ようやくIE7のシェアがIE6のシェアをこえて本格的に入れ替えがおこなわれていくだろうといった状況が現実だ。大きなシェアを持つIE6への配慮は依然として続けなければならず、そしてそのための苦労もあと数年は続けなければならない。

    そうした対IE6テクニックのひとつだが、Alex Walker氏がSitePoint BlogsにおいてMaking 'IE6-friendly' PNG8 Imagesという記事を公開している。IE6でPNG、とくに透過処理がうまく処理できないのは既知の事実だが、なんとか簡単な方法でこれに対応できないかという内容だ。

    同氏は半透明なPNG8画像がIE6では透明かそうでないかの2つにわかれてしまう例をあげ、これに対応する方法として半透過対象となる部分にIE6で表示された場合になんとなくごかませるイメージを作っておくという方法を紹介している。

    同氏は付箋紙画像の例を上げ、影部分を4つの画像として用意し合成した。ポイントはこの影部分をclearに指定していることだ。こうしておけばIE6では透過が処理されずにその色が表示されるが、対応しているブラウザ、たとえばFirefoxでは本来の透過画像として処理されるというわけだ。

    画像の作成が若干面倒になるのと、このテクニックを使っても完全に同じイメージにはできない(できないこともないが同じようにすると結構面倒)という制約はあるが、少ない手間でIE6とそれ以外のブラウザに対応するという点では悪くないテクニックだ。

    関連サイト

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン