dncl

上のスクリーンショットをクリックすると、サンプルページが別ウィンドウで開きます。
解説と合わせてご覧ください。

まず、新規(X)HTMLファイルを作成し、テキストボックス、見出し、本文をそれぞれマークアップします。
この例では、id"icon"を設定した<div>内に、アイコンとしてpng-24を配置します。

(X)HTMLソース

<div id="textContainer">
<div id="icon">
<img src="img/link.png" alt="icon image" width="30" height="36" title="icon" />
</div>
<h3 class="hl1">アルファチャンネル付きpng-24をIE6で表示させる</h3>
<p>
アルファチャンネル情報を付加できるので、〜
IE6向けcssの記述法を解説していきます。
</p>
</div>

こうして、普通にpng-24画像を指定するだけで、ほとんどのモダンブラウザでは問題なく表示してくれるのですが、IE6の場合、このままだと透明な部分が白く表示されてしまいます。
というわけで、IE6対策をしなくてはならないのですが、今回はハックではなく条件付きコメントでIE6専用CSSを読み込ませる方法を取るので、新規にCSSファイルを作成します。
新しく作成したCSSファイルに、以下のように記述します。

IE6用CSSソース

div#icon {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/link.png",sizingMethod="image");
}
div#icon image {
	visibility:hidden;
}

このCSSで、id"icon"を設定した<div>に「AlphaImageLoader」を利用してpng画像をかぶせ、その上でimage要素を非表示にしています。
注意するべき点は、通常CSSで背景画像を相対指定する際、そのCSSファイルからの相対パスを記述しますが、この場合は対象のHTMLファイルからの相対パスを記述しなくてはならないということです。

最後に、(X)HTMLファイルに条件付きコメントを記述し、ブラウザがIE6だった場合にだけIE6用CSSを読み込ませるようにします。

(X)HTMLソース

<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" media="screen" type="text/css" />
<![endif]-->

今回は少々回りくどい方法を取りましたが、同じ「AlphaImageLoader」を利用したものでも、他のモダンブラウザと同様の表示結果を得るにはいくつもの方法があります。もっと単純にbackgroundプロパティの指定を書き換えるだけで問題ない場合もありますが、適用する要素によっては画像が表示されなかったりしますので、使う場面ごとにある程度の調整が必要になります。下記リンクからダウンロードできるサンプルソースを参考に、皆さんのwebサイトに合わせた方法を探してみてください。

サンプル

• ダウンロード : lzhファイル(10kb)

参考サイト

• PNG in Windows IE
• ieでalphaチャンネル付PNGを表示させる : Afternoon Cafe
• PNG Behavior (WebFX)