hamashun.comhamashun.comJavaScriptが利用できない状態です。一部コンテンツが正常に動作しない可能性があります。MenuHomeWorkAboutBlogContactLinkBlog※ブログ移転しました。»IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。Designing誌でも特集が組まれたりと、関心も高まっているようです。そこで問題となるのはIE6のアルファチャンネル問題。何らかの手段でこれを解決する必要があります。前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。img要素ではなく、CSSの背景画像で使用する場合として検証しました。img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。標準準拠のCSSのみでは不可能IEの独自拡張の、filterプロパティを使う必要があります。CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlphaImageLoaderフィルタを使用しています。2.0などを除いてbackground-positionとbackground-repeatは使えない多くのライブラリでは、背景画像の繰り返しと位置指定ができません。2.0の登場でひとまず解決したと言えそうです。Fixという記事に掲載されているライブラリでも繰り返しと位置指定ができるとの事ですが、試したところうまく動かせませんでした。2.0の方が簡単だと思います。謎の文字列が登場するfilterプロパティのAlphaImageLoaderフィルタを使っているので、見慣れない構文が登場します。詳細はとみのホームページ内のAlphaImageLoaderに詳しく載っています。一つめの規則集合はIE6以外のブラウザに対するものです。二つめの規則集合はIE6用のものです。ここではスターハックを使って振り分けましたが、方法はなんでもよいです。backgroundプロパティをnoneとしているのは、filterプロパティで表示される画像はbackgroundプロパティで表示された画像とは違う物だからです。三つめの規則集合もIE6用のものです。ここでのスターハックは必須ではありません。この宣言自体も必須ではありません。この宣言が必要になるのは、指定した要素の子要素にa要素やonclick属性、onmouse属性などが含まれる場合です。当該要素に合わせたものになります。実装の際には数行のコードを加えるだけなので、手軽に使えます。反面、適用したい画像の枚数が増えると比例して規則集合が増えてしまいます。パスの指定にクセがあったり背景画像のようには扱えないなど、backgroundプロパティの感覚で記述すると思い通りにならない事があります。ヨモツネットで紹介されたものです。Behaviorで概要を掴めます。relative;}コード解説メリット・デメリットと合わせて元記事で詳しく解説されているので、そちらをご参照ください。雑感メリットは元記事で紹介されていますが、相対パスで記述できる事によりHTMLのディレクトリ構成に影響されないので、背景画像で使う際には特に便利だと思います。IE6とそれ以外のブラウザで同じ画像を使う事になるので、繰り返し表示ができない為に大きめの画像を用意する場合には、Firefoxなどにもその画像が読み込まれてしまう事になります。あるようなのですが、今回は試す範囲に含めませんでした。v2.0は2008年9月現在で開発中のライブラリです。Ver,UPに伴い記事と異なる部分が出る可能性があります。src="iepngfix_tilebg.js"></script><![endif]-->コード解説style要素を使っているのは解説用コードだからで、CSSファイルに記述する事ができます。条件付コメントを使ってIE6にのみJSファイルを読ませていますが、他の方法でも問題ありません。独自拡張のbehaviorプロパティを使って、htcファイルを読み込んでいます。iepngfix_tilebg.jsも合わせて読み込む事によって、background-positionプロパティやbackground-repeatプロパティと同様の効果を得られます。注意点として、background-positionプロパティとbackground-repeatプロパティの効果を得たい場合には、iepngfix_tilebg.jsを読み込ませて、当該要素に任意のclass属性かid属性を付ける必要があります。大事な事なので二度言いますが、この属性値には任意の値が付けられます。位置指定や繰り返し表示を必要としないなら、iepngfix_tilebg.jsを読み込ませる必要はありません(Ver,1がそれにあたります)。個人的に現在最もアツイ方法。これまで不可能とされていた背景画像の位置指定と繰り返し表示ができます。何がしかのclass属性かid属性が必要とは言え、機能の為の値を強制され無い事がHTML的にとてもCoolです。a要素などへの指定が必要ない点も便利です。TwinHelixからダウンロードできます。Ver,2が正式版になったら、現在のVer,1と同じ場所に移動すると思われます。ライセンスについてiepngfix.htc内のライセンスについて書かれている部分は以下のようになっています。元に配布されています」みたいな感じ、だと思います。url(ie.gif);}コード解説スターハックを使ってIE6にはGIF画像を読み込ませています。雑感IE6にはPNG画像を使わない、というMOSe的な発想です。wayIE6では若干見栄えが落ちますが、スクリプトによって重くなる心配がありません。