ホームページを作ろうヨ!!

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

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

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

VOL13. IE独自拡張による設定　その2 ★ フィルタ7 色調、角度、不透明度の一括指定 （IE5.5以降で有効）

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

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

grayscale ... グレースケール化（する「1」 / しない「0」、デフォルトは「0」）

invert ... 色の反転（する「1」 / しない「0」、デフォルトは「0」）

mirror ... 左右の反転（する「1」 / しない「0」、デフォルトは「0」）

opacity ... 不透明度（0.0～1.0、デフォルトは「1.0」）

※数値が大きくなるほど、不透明度が増します。

rotation ... 回転角度（0～3、デフォルトは「0」）

0	1	2	3
回転しない	90度	180度	270度

xray ... 白黒反転（する「1」 / しない「0」、デフォルトは「0」）

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

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

これらの詳細は、下の例のように必要なプロパティのみ（）内に「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1,invert=1);

← 元の画像


(grayscale=1)	(grayscale=1,invert=1)	(invert=1)


(mirror=1)	(opacity=0.25)	(rotation=3)	(rotation=2,xray=1)

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

CSS設定

.basicimage1 { filter: progid:DXImageTransform.Microsoft.BasicImage
(grayscale=1); }

.basicimage2 { filter: progid:DXImageTransform.Microsoft.BasicImage
(grayscale=1,invert=1); }

.basicimage3 { filter: progid:DXImageTransform.Microsoft.BasicImage
(invert=1); }

.basicimage4 { filter: progid:DXImageTransform.Microsoft.BasicImage
(mirror=1); }

.basicimage5 { filter: progid:DXImageTransform.Microsoft.BasicImage
(opacity=0.25); }

.basicimage6 { filter: progid:DXImageTransform.Microsoft.BasicImage
(rotation=3); }

.basicimage7 { filter: progid:DXImageTransform.Microsoft.BasicImage
(rotation=2,xray=1); }

　HTMLでの呼び出し

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

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

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

2007.4.24.