低価格・高品質・最速のHTMLコーディングはクロノドライブへ

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

背景を重ねたり、画像文字に使用したりと、何かと便利な透過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を表示させることができるようになります。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ