> > IE6でアルファチャンネルPNGを使う方法と注意点

IE6でアルファチャンネルPNGを使う方法と注意点

小川貴史

このエントリーをはてなブックマークに追加

PNGとは

PNGというのは、画像フォーマットの1つです。特長の1つとしてアルファチャンネル(透過属性)を持つことが出来ます。このアルファチャンネルを使うことで、ホームページの制作をシンプルにすることが出来たりします。

しかし、まだまだ主流であるIE6では、このアルファチャンネルPNGに対応しておらず、使う場合にはDirectXの機能を使ったりと結構手間でした。(IE7からは対応)

IE6で透明画像(png)を簡単に使う方法

こちらを使うことで、IE6で透明画像(png)を使うことが簡単に出来るようになります。
しかし利用に関していくつか注意点があります。

注意点1:パス指定は絶対パスで

CSSからファイルへのパス指定が、CSSからではなく、読み込んだファイルからの指定でなければいけません。ですので絶対パスで指定すると良いでしょう。

例:img, div { behavior:url(/common/iepngfix/iepngfix.htc) }

ついでにIE6のCSSハックするなら下記
* html img,
* html div { behavior:url(/common/iepngfix/iepngfix.htc) }

注意点2:階層内に含まれているpng以外の背景部分も消える

「div id="container"」などと上階層部分でIE PNG Fixを使ってしまうと、条件はよく分かっていませんが、その範囲内で使っている背景部分(background:)も消えてしまう場合があります。

子要素がない最下層で利用する場合であれば、上記の問題は出ませんので、下記のように個別指定で利用すると良いでしょう。

#main-image img { behavior:url(/common/iepngfix/iepngfix.htc) }

注意点3:背景画像の繰り返しができない

背景画像を繰り返す「repeat-x」「repeat-y」「repeat」が効きません。ですので、繰り返し処理で事が済みそうな背景画像でも、大きな画像を用意する必要があります。

08/09/03 追記

v2.0からは、背景画像の繰り返しにも対応したようです。

アルファチャンネルPNGは便利

アルファチャンネルPNGが標準で使えるIE7のシェアもだんだんと増えてきています。使うのに少しコツが要りますが、非常に便利な機能ですので、一度使ってみてはいかがでしょうか。

このエントリーをはてなブックマークに追加

読者のコメント

コメントを投稿

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

(HTMLタグは使用できません)

トラックバック

このエントリーのトラックバックURL
http://www.ibnet.ne.jp/mt/mt-tb.cgi/971

ホーム > Webデザイン > IE6でアルファチャンネルPNGを使う方法と注意点

このページの先頭へ