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

VOL13. IE独自拡張による設定　その2 ★ フィルタ4 彫刻風に表示する−エンボスとエングレイヴ−

（IE5.5以降で有効）

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

要素を彫刻風に表示するフィルタには、以下の2種類があります。

filter: progid:DXImageTransform.Microsoft.Emboss（詳細設定） ... 浮き出したように加工します。

filter: progid:DXImageTransform.Microsoft.Engrave（詳細設定） ... 彫りこんだように加工します。

１.「filter: progid:DXImageTransform.Microsoft.Emboss（詳細設定）」

bias ... 浮き上がる高さ(-1.0〜1.0、デフォルトは「0.7」)

※浮き上がる高さは細かく反映されない場合があります。

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

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

浮き上がる高さは（）内に指定し、「enabled」 も指定する時は「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.Emboss(bias=1.0,enabled=true);

元の画像	Embossで加工

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

２.「filter: progid:DXImageTransform.Microsoft.Engrave（詳細設定）」

bias ... 浮き上がる高さ(-1.0〜1.0、デフォルトは「0.7」)

※浮き上がる高さは細かく反映されない場合があります。

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

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

浮き上がる高さは（）内に指定し、「enabled」 も指定する時は「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.Engrave(bias=1.0,enabled=true)

元の画像	Engraveで加工

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

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

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

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