たった6行追加するだけ！CSSだけで透過PNGをIE6で表示させるテクニック

2010年11月20日

背景を重ねたり、画像文字に使用したりと、何かと便利な透過PNGですが、実はIE6には対応していません。そこで今回は、CSSのみを使って透過PNGをIE6で表示させる方法をご紹介します。

HTML

1<div class="sampleBox">
2    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
3</div>

CSS

01.sampleBox {
02    width: 200px;
03    height: 100px;
04}
05/* ここからが透過PNG適用のためのCSS */
06    html>body .sampleBox {
07        background-image: url(./demo.png);
08    }
09    * html .sampleBox {
10    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./demo.png', sizingMethod='scale');
11    }

サンプルページ

※上記サンプルページはIE6以外で閲覧しても違いは分かりません。IE6は使ってないけどどうしても見たいという方は、IE Testerで閲覧するとよいかと思われます。

上記のサンプルでは、まずすべてのブラウザに対してsampleBoxというスタイルを適用させ、ハックを使ってIE6以外のすべてのブラウザと、IE6のみに適用させるスタイルを分けます。IE6に対しては、IEの独自拡張フィルタをIE6のみに適用させることで、IE6でも透過PNGを表示させることができるようになります。