hamashun.com

最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。
2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。

ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。
少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。
なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。

概ね共通する事

標準準拠のCSSのみでは不可能

IEの独自拡張の、filterプロパティを使う必要があります。
CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlphaImageLoaderフィルタを使用しています。

IE PNG Fix 2.0などを除いてbackground-positionとbackground-repeatは使えない

多くのライブラリでは、背景画像の繰り返しと位置指定ができません。
この問題はかなり深刻な悩みの種でしたが、IE PNG Fix 2.0の登場でひとまず解決したと言えそうです。

A Better IE 5.5 and 6 PNG Fixのライブラリについて

Post Production ? A Better IE 5.5 and 6 PNG Fixという記事に掲載されているライブラリでも繰り返しと位置指定ができるとの事ですが、試したところうまく動かせませんでした。
サンプルが無く、全文が英語なので僕の使い方が間違っていたのだと思いますが、導入はIE PNG Fix 2.0の方が簡単だと思います。

謎の文字列が登場する

filterプロパティのAlphaImageLoaderフィルタを使っているので、見慣れない構文が登場します。
詳細はとみのホームページ内のAlphaImageLoaderに詳しく載っています。

CSSに直接filterプロパティを記述する方法

サンプルコード

div {
  background: url(alpha.png);
}

* html div {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=http://example.com/img/ie.png);
}

* html div a {
  position: relative;
}

コード解説

一つめの規則集合はIE6以外のブラウザに対するものです。

二つめの規則集合はIE6用のものです。 ここではスターハックを使って振り分けましたが、方法はなんでもよいです。
backgroundプロパティをnoneとしているのは、filterプロパティで表示される画像はbackgroundプロパティで表示された画像とは違う物だからです。

三つめの規則集合もIE6用のものです。 ここでのスターハックは必須ではありません。 また、この宣言自体も必須ではありません。
この宣言が必要になるのは、指定した要素の子要素にa要素やonclick属性、onmouse属性などが含まれる場合です。もちろんセレクタの a は当該要素に合わせたものになります。

メリット

• 記述自体はシンプル
• IE6とそれ以外のブラウザで、別々の画像を指定する事ができる（繰り返し表示できない件の対策として巨大な画像を使う場合など）

デメリット

• 画像の指定はHTMLを基準に考える必要があるので、絶対パスでの指定が現実的になる
• 独自拡張のプロパティを使用する
• 記述が多くなると面倒

雑感

実装の際には数行のコードを加えるだけなので、手軽に使えます。 反面、適用したい画像の枚数が増えると比例して規則集合が増えてしまいます。
また、パスの指定にクセがあったり背景画像のようには扱えないなど、backgroundプロパティの感覚で記述すると思い通りにならない事があります。

ヨモツネットの手法

この方法は、CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする | ヨモツネットで紹介されたものです。
behaviorプロパティ自体については、古い記事ですがTime Off for Good Behavior: Internet Explorer 5における DHTML Behaviorで概要を掴めます。

サンプルコード

div {
  background: url(alpha.png);
}

* html div {
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

* html div a {
  position: relative;
}

コード解説

メリット・デメリットと合わせて元記事で詳しく解説されているので、そちらをご参照ください。

雑感

メリットは元記事で紹介されていますが、相対パスで記述できる事によりHTMLのディレクトリ構成に影響されないので、背景画像で使う際には特に便利だと思います。

ただ、IE6とそれ以外のブラウザで同じ画像を使う事になるので、繰り返し表示ができない為に大きめの画像を用意する場合には、Firefoxなどにもその画像が読み込まれてしまう事になります。

JavaScriptを使う方法

色々あるようなのですが、今回は試す範囲に含めませんでした。

IE PNG Fix v2.0を使う方法

IE PNG Fix v2.0は2008年9月現在で開発中のライブラリです。 Ver,UPに伴い記事と異なる部分が出る可能性があります。

サンプルコード

<style type="text/css">* html div.sample { behavior: url(iepngfix.htc); }</style>
<!--[if lte IE 6]><script type="text/javascript" src="iepngfix_tilebg.js"></script><![endif]-->

コード解説

style要素を使っているのは解説用コードだからで、CSSファイルに記述する事ができます。
また、条件付コメントを使ってIE6にのみJSファイルを読ませていますが、他の方法でも問題ありません。

独自拡張のbehaviorプロパティを使って、htcファイルを読み込んでいます。
iepngfix_tilebg.jsも合わせて読み込む事によって、background-positionプロパティやbackground-repeatプロパティと同様の効果を得られます。

注意点として、background-positionプロパティとbackground-repeatプロパティの効果を得たい場合には、iepngfix_tilebg.jsを読み込ませて、当該要素に任意のclass属性かid属性を付ける必要があります。 大事な事なので二度言いますが、この属性値には任意の値が付けられます。

もし位置指定や繰り返し表示を必要としないなら、iepngfix_tilebg.jsを読み込ませる必要はありません（Ver,1がそれにあたります）。

メリット

• 今回紹介した中で唯一、background-positonプロパティとbackground-repeatプロパティ相当の機能がある
• 繰り返し表示ができるので、画像を分ける必要がない
• ライブラリを読み込むだけの簡単さ

デメリット

• 独自拡張を使う必要がある
• 何らかのclass属性かid属性が必要
• 若干重い？ 使用数が多いとそれだけ重くなってしまう
• 他のJSに影響が及ぶ可能性がある

雑感

個人的に現在最もアツイ方法。 これまで不可能とされていた背景画像の位置指定と繰り返し表示ができます。
しかも、何がしかのclass属性かid属性が必要とは言え、機能の為の値を強制され無い事がHTML的にとてもCoolです。
また、a要素などへの指定が必要ない点も便利です。

ライブラリ入手先

Ver,1.xはIE PNG Fix - TwinHelixから、Ver,2.x(のテストバージョン)はBeta Testing Area - TwinHelixからダウンロードできます。
Ver,2が正式版になったら、現在のVer,1と同じ場所に移動すると思われます。

ライセンスについて

iepngfix.htc内のライセンスについて書かれている部分は以下のようになっています。

This is licensed under the GNU LGPL, version 2.1 or later.

英語2のhamashunが超頑張って翻訳すると、多分、「このライブラリは GNU LGPL バージョン2.1（以降） の元に配布されています」みたいな感じ、だと思います。 たぶん！
（意味的に誤解を与えてしまう訳だったら、ツッコミいただけるとありがたいです）

LGPLについて参考になりそうなページ

• GNU Lesser General Public License - Wikipedia
• LGPL 「GNU LGPL」 エルジーピーエルとは： - IT用語辞典バイナリ

おまけ：IE6にはGIF画像を使う方法

サンプルコード

div {
  background: url(alpha.png);
}

* html div {
  background: url(ie.gif);
}

コード解説

スターハックを使ってIE6にはGIF画像を読み込ませています。

雑感

IE6にはPNG画像を使わない、というMOSe的な発想です。 参考：MOSeのススメ - Go my way
IE6では若干見栄えが落ちますが、スクリプトによって重くなる心配がありません。