JavaScriptやCSSで簡単にIE6でアルファ画像(透過png)を使う方法

IE6はアルファ画像(透過png)が使えませんが、今回紹介する方法で簡単にIE6でもアルファ画像を使うことができるみたいなので、いつも通りメモしておきます。
ちなみに透過を活用することによって、さらにデザインの幅が広がるかもしれません、あー楽しみかもです。透過を活用したウェブデザインは以下のサイトでいろいろ紹介されています。
透過をきれいに使ったウェブデザインいろいろ | DesignWalker

IE PNG Fix

IE PNG Fix(英語)で簡単にIE6でもアルファ画像を使うことができるようになります。ちなみに2008年7月17日にIE PNG Fix 2が公開されていて、さらに問題点が改善されてるようです。ちなみに以下のページでは分かりやすく導入までの手順を分かりやすく紹介されています。
IE PNG Fix Alpha 2を使ってみた。 | ちぷろぐ

ついでに私もIE PNG Fixの使い方で簡単に導入方法を説明しているので参考にしてみてください。

alphafilter.jsライブラリを使って指定した画像だけに透過処理を与える

これは導入までが簡単。解説も日本語だしclassにalphafilterと追加記述するだけで簡単に処理を行えます。ただし背景画像には対応していないので、背景画像にも透過処理を加えたい場合は先ほど紹介したIE PNG Fixを使うか、さらに追加でCSSに細工をする方法があります。CSSに細工をする方法は後ほど紹介しますです。
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

CSSに細工をする。

細工というかスターハックを使ってIE6にのみ適応するスタイルを記述します。またIE6の独自拡張フィルタなどを使ってあれこれします。
透過pngを表示する-CSS TIPS

それが以下のコードです。

1
2
3
4
5
6
7
8
9

div.alpha{
	width:100px;
	height:200px;
	background:url("alpha.png");
}
* html div.alpha{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}

ですが、このままでは要素に合わせて画像がびよんびよん伸び縮みするので、画像のサイズを変更したくない人は以下のように記述してみます。太字の部分を書き換えました。

1
2
3
4
5
6
7

div.hoge{
	background:url("alpha.png");
}
* html div.hoge{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hoge.png',sizingMethod='<strong>crop</strong>');
	background:none;
}

IEの独自拡張機能で良く分かりませんが、以下のサイトが詳しいみたいです。
AlphaImageLoader – filter,フィルタ

いろいろと書きましたが、最初からIE6がなければこんな面倒なことはしなくて良いはず。早くIE7にみんな強制以降させないといけないかもですよ。まぁIE7にもいろいろとバグはあるし、IEを使ってるといろいろと面倒なことが多いはず。みんなが早めにモダンブラウザの良さに気づいて変えてくれれば良いと思いますです。