★このページでは、IEで独自に拡張された設定について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL13. IE独自拡張による設定　その2 ★ フィルタ5 ブレをつける （IE5.5以降で有効）

※フィルタそのものはIE4.0以降から有効なものもありますが、指定する書式が違い、IE5.5以前のブラウザは既に一般的でないため、ここではIE5.5以降で有効な書式で解説してゆきます。形式は、どのフィルタも「filter: progid:DXImageTransform.Microsoft.」の後に入る部分を変えることにより、種類を指定します。

　

filter: progid:DXImageTransform.Microsoft.MotionBlur（詳細設定）

direction ... ブレの方向（0、45、90、135、180、225、270(デフォルト)、315）=45度単位

0

45

90

135

180

225

270

315

上

右上

右

 右下 下 左下 左 左上

strength ... ブレの強さ(0以上の整数値)

※数値が大きくなるほど、ブレが強くなります。

add ... 元の画像をベースに置くかどうか　（置く...「true」 もしくは「1」 / 置かない...「false」 もしくは「0」）

enabled ... フィルタの実行　（実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」）

（但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。）

　

これらの詳細は、下の例のように（）内に「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.MotionBlur(direction=135,strength=20,add=true);

元の画像

add=true

add=false

　

CSSとHTMLでは、それぞれ以下のように書かれています。

 

CSS設定

.motionblur1 { filter:progid:DXImageTransform.Microsoft.MotionBlur
(direction=135,strength=20,add=true); }

.motionblur2 { filter: progid:DXImageTransform.Microsoft.MotionBlur
(direction=135,strength=20,add=false); }

　

　HTMLでの呼び出し

<img class="motionblur1" src="ayabo_welcome.jpg" width="149" height="150">
<img class="motionblur2" src="ayabo_welcome.jpg" width="149" height="150">

　

　

以上は画像を使って解説しましたが、段落（ｐ）などの要素にフィルタをかけて文字を装飾することもできます。詳細はこちらをご覧下さい。

　

初級篇2.VOL13. IE独自拡張による設定・その2-4 <<

>> 初級篇2.VOL13. IE独自拡張による設定・その2-6

　

2007.4.3.