フィルタ概要

HOME > とほほのWWW入門 > とほほのフィルタ入門 > フィルタ概要
1998年1月18日版

フィルタとは

Internet Explorer 4.0 でサポートされた機能で、HTMLの記述だけで、
  
できちゃったりします。 (IE4.0以外のブラウザの人のために、この(↑)サンプルのみは画像に変換して貼り付けています)

指定は簡単、CSSと同様、STYLE属性で指定します。 指定可能なタグには <BODY>, <SPAN>, <DIV>, <IMG>, <INPUT>, <BUTTON>, <TABLE>, <TR>, <TH>, <TD>, <TEXTAREA>, <THEAD>, <TFOOT>, <MARQUEE> がありますが、<SPAN>, <DIV> で使用する場合は、width, height を指定してやるか、position で absolute を指定してやる必要があります。

    <SPAN STYLE="width:100%; filter:Shadow()">
    影付きの文字になります
    <SPAN>
(...) の中には属性値をカンマ( , )で区切って指定します。
    <SPAN STYLE="filter: Blur(direction=135, strength=5)">
効果を複数指定する場合はスペースで区切ります。
    <SPAN STYLE="filter: FlipH() FlipV()">
使い方が悪いのか、環境が悪いのか、期待通りの効果を得られない物もありますが、IE4.0でサポートされているフィルタの一覧を以下に示します。 (この他にもあるみたい)

フィルタに関する注意

大変便利そうに見えるフィルタ機能ですが、注意しておかなくてはならない点がいくつかあります。

非常に重い。 私が使用しているマシンは Pentium 75MHz ですが、フィルタを使用しているページは表示にも時間がかかるし、スクロールも非常に遅くなります。 皮肉なことに、フィルタ効果後の画像を貼り付けた方が早く感じます。

Netscapeに影響を及ぼす。 NN は STYLE="filter:〜" をサポートしていないので完全に無視してくれるのかと思えば、どうも、そうではないようです。 環境にもよるのかもしれませんが、「フィルタサンプル」を私の NN4.0 で表示すると、テーブルの構造が崩れてしまうようです。 以下のようにID属性を用いることでとりあえず回避できましたが、まだまだ安心できません。

    <HTML>
    <HEAD>
    <STYLE TYPE="text/css">
    <!--
    #XXX { filter:FlipH() }
    -->
    </STYLE>
    </HEAD>
    <BODY> <IMG SRC="〜" ID=XXX> </BODY> </HTML>

まだまだ未完成。 使い方が悪いのか、バグなのか、まだまだ動作が安定していないようです。 (例えば、Alpha() の注意事項など・・・・) 自分のブラウザでちゃんと表示できたとしても、他のブラウザでは無残な表示になってしまうことが大いにありえます。 下手をすると、せっかく見に来てくれた人のブラウザをアプリケーションエラーに陥れ、最悪、マシンをリブートしなくてはならない状況にさせてしまう危険性があります。


Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )