フィルタとは、Internet Explorerが独自に拡張したWebページ上で視覚的なこうかを表現する機能のことで、スタイルシートを利用して提携の書式を記述することで、画像やテキストに特殊効果を設定することができます。　Internet Explerer 4.0以上のブラウザで表示可能なフィルタと、Direct X を必要とし、 Internet Explorer 5.5以上のブラウザで表示可能なフィルタとがありますが、いずれもWindows版のInternet Explorerでのみ動作します。

■　Direct X

Direct X とは、Microsoftが開発した、Windows環境でマルチメディア機能を強化するための技術の総称です。この技術によりグラフィックス描画や音声の処理などマシンパワーを必要とする処理が、快適で高速に実現できるようになります。
Windows98以降は標準で搭載されるようになっていますが、Microsoft社のサイトからダウンロードするなどして入手することも可能です。（2003.05.01　現在）

フィルタ名	IE5.5以上	IE4.0以上	備考
Alpha	○	○
Blue	○	×	IE4.0のBlurは性質が異なる
Chroma	○	○
DropShadow	○	○
Glow	○	×
Emboss	○	×
Engrave	○	○
Maskfilter	○	△	IE4.0では、Mask
MotionBlur	○	△	IE4.0ではBlur
Shadow	○	○
Wave	○	○
BasicImage	○	×
fliph	×	○	BasicImageで表現可能
flipv	×	○	BasicImageで表現可能
gray	×	○	BasicImageで表現可能
invert	×	○	BasicImageで表現可能
xray	×	○	BasicImageで表現可能

 

■　Filterを使う場合の基本書式

・Internet Explorer 5.5以上

filter:progid:DXImageTransform.Microsoft.フィルタ名.プロパティ

・Internet Exploler 4.0

filter:フィルタ名.プロパティ

■ 　フィルタの設定方法

フィルタの設定方法は、他のCSSと同様に行います。

・style属性

<Img src="sample.jpg"

style="filter:progid:DXImageTransform.Microsoft.MotionBlue(strangth=50)

widtg=50%">

・style要素

<style type="text/css">

img{

style="filter:progid:DXImageTransform.Microsoft.MotionBlue(strangth=50)

}

</style>

※　これらのフィルタを適用するには、要素に対してpositionプロパティでabsoluteを指定するか、widthプロパティやhightプロパティを設定して表示位置を指定するなどの必要がありますので、注意してください。
また、フィルタによってはボックスを変形させて効果を表現するため、その分の領域も考慮した上で要素の位置やサイズを指定しておかなくてはなりません。
核フィルタの性質を理解した上でページのレイアウトを行うことが重要です。

■　Transition Filter　作例

この作例では、JavaScriptを使ってトランジション効果を設定しています。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial