フィルタについて

　Photoshopなどに触れたことのある人にはお馴染みのフィルタです。Photoshopにはさすがに劣りますが、Windows版のIEには多くのフィルタが実装されていて、 原画をいじることなく画像や文字に効果を与えることが出来ます。また、JavaScriptとの連携も多用され、フィルタ関連では フィルタを用いたDHTMLを紹介しています。CSSのコーナーでは、代表的なフィルタの基本のみを取り上げています。

フィルタの基本

　フィルタを要素に適用する場合には以下のように記述します。

filter:progid:DXImageTransform.Microsoft.フィルタ名(フィルタの各属性)

　通常の属性と違い、filter属性のあとになにやら長ったらしいのがついています。 それぞれのフィルタにも属性が存在して、それを記述する場合は（）を用いて設定します。

<p style="filter:progid:DXImageTransform.Microsoft.alpha(style=1, opacity=100, finishopacity=0);background-color:pink;color:white;font-size:72px;width:100%"> JavaScript PatchWorker</p>

　上のサンプルではalphaフィルタのサンプルを取り上げています。 alphaフィルタの詳細はこちら
　また、フィルタを適用する場合はwidth,height,positionなどの属性を設定しないと効果が現れない場合がありますので、 これらの属性を必要としない場合もwidth:100%などを記述しておくことをお勧めします。

フィルタ利用上の注意

　フィルタが動作するのはWindows版のInternet Explorer5.5以上です。Netscape Navigator他IE以外のブラウザでは動作保障は出来ません。
　ただし、
filter:progid:DXImageTransform.Microsoft.フィルタ名
と記述する代わりに
filter:フィルタ名
と記述することで、IE4.0以上の環境で動作できるフィルタも多数存在します。
また、Windows2000ではフィルタがまったく動作しない場合があります。