CSS フィルタ効果について

はじめに

フィルタは、ウェブ作成者が興味深い視覚効果を得るために使用できる強力なツールです。この記事では、フィルタ効果の歴史、機能、使用方法について説明します。CSS 用に定義されたすべての定義済みフィルタの例を、いくつか例を使って説明します。また、パソコンとモバイル デバイスでの使用に関するパフォーマンスに関する考慮事項についても説明します。フィルタが速度に与える影響を把握することは、優れたユーザー エクスペリエンスを実現するために重要です。最後に、最新のブラウザでの実装の現状を確認します。

フィルタ効果の過去、現在、未来

フィルタ効果は、Scalable Vector Graphics（SVG）仕様の一部として始まりました。ベクター描画にさまざまなピクセルベースの画像効果を適用するために作成されました。ブラウザ ベンダーがブラウザに SVG 機能を追加するにつれて、フィルタの有用性が明らかになりました。Mozilla の Robert O’Callahan 氏は、CSS を「通常の」HTML コンテンツに適用して SVG フィルタを使用するという素晴らしいアイデアを思いつきました。Robert は、フィルタと CSS スタイル設定を組み合わせることで、どれほど強力なことができるかを示す初期バージョンのプロトタイプを作成しました。W3C の CSS ワーキング グループと SVG ワーキング グループは、CSS スタイル設定を介して HTML と SVG の両方でフィルタの使用を統一することを決定し、CSS の「filter」プロパティが誕生しました。現在、CSS と SVG の担当者による共同タスクフォースが、フィルタを普遍的に有用なものにするために多くの作業を行っています。これらすべての現在の仕様については、こちらをご覧ください。

CSS プロパティ「filter」の新たな活用

ウェブ デベロッパーは、CSS スタイルで「filter」という単語を目にしたときに、デジャヴを感じることがありますが、これは、古いバージョンの Internet Explorer では、プラットフォーム固有の機能を実行するために CSS を介して「filter」プロパティが公開されていたためです。これは非推奨となり、CSS3 の一部である標準の「filter」プロパティに置き換えられました。そのため、古いウェブページで「フィルタ」という単語を見かけても、混乱する必要はありません。新しい「filter」プロパティがすべての処理を行います。新しいバージョンの IE では、すべての最新ブラウザと同じように実装されています。

フィルタの仕組み

フィルタの役割とはフィルタは、ページ コンテンツがすべてレイアウトされて描画された後に、魔法のような処理を行うポスト処理ステップと考えるとわかりやすいでしょう。

ブラウザがウェブページを読み込む際は、スタイルを適用し、レイアウトを実行してから、表示できるようにページをレンダリングする必要があります。フィルタは、これらの処理がすべて完了し、ページが画面にコピーされる直前に適用されます。レンダリングされたページのスナップショットをビットマップ画像として取得し、スナップショットのピクセルにグラフィック マジックを適用して、結果を元のページ画像の上に描画します。カメラのレンズに装着するフィルタに例えることができます。レンズを通して見えているものは、フィルタの効果によって変形された外界です。

当然、フィルタが適用されたページを描画する際には時間がかかりますが、フィルタを適切に使用すれば、サイトの速度への影響は最小限に抑えられます。

また、カメラのレンズに多数のフィルタを積み重ねるのと同じように、任意の数のフィルタを次々に適用して、さまざまな効果を実現できます。

SVG と CSS を使用して定義されたフィルタ

フィルタはもともと SVG から派生したものであるため、フィルタを定義して使用する方法はいくつかあります。SVG 自体には、XML 構文を使用してさまざまなフィルタ効果の定義をラップする <filter> 要素があります。CSS で定義されたフィルタセットは同じグラフィック モデルを利用しますが、定義がはるかにシンプルで、スタイルシートで簡単に使用できます。

ほとんどの CSS フィルタは SVG フィルタで表現できます。また、必要に応じて SVG で指定されたフィルタを参照することもできます。CSS フィルタの設計者は、ウェブ作成者がフィルタを簡単に適用できるように細心の注意を払っています。そのため、この記事では、CSS から直接使用できるフィルタのみを扱い、当面は SVG 定義を無視します。

CSS フィルタを適用する方法

CSS のフィルタを使用するには、ウェブページ上の表示可能な要素に「filter」プロパティを適用します。非常に簡単な例として、次のように記述できます。

div { { % mixin filter: grayscale(100%); % } }

そうすると、ページ上のすべての <div> 要素内のコンテンツがグレーに変わります。ページを 1940 年代のテレビ画像のように見せるのに適しています。

ほとんどのフィルタは、なんらかのパラメータを使用して、フィルタ処理の程度を制御します。たとえば、元の色とグレースケール バージョンの中間色にコンテンツのスタイルを設定するには、次のようにします。

div { { % mixin filter: grayscale(50%); % } }

複数のフィルタを順番に適用するには、CSS に順番に配置します。

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

この例では、まず元の色がすべてグレースケールになり、次にセピア効果が適用されます。最終的に、次のようになります。

フィルターを次々と連続して適用できる柔軟性により、あらゆる種類の効果が得られます。実際に試してみて、素晴らしい結果を生み出してください。

CSS で使用できるフィルタ効果

したがって、元の SVG フィルタ メカニズムは強力ですが、同時に使いこなすのが難しい場合があります。そのため、CSS には、使用が非常に簡単な標準のフィルタ エフェクトが多数用意されています。

それぞれがどのような役割を果たしているか見てみましょう。

grayscale(amount)

これにより、入力画像の色がグレースケールに変換されます。[適用量] は、グレー変換を適用する量をコントロールします。100% に設定すると、すべてがグレーの色合いになります。0% に設定すると、色は変更されません。ここでは、パーセンテージよりも浮動小数点数を使用できます。たとえば、0 は 0% と同じ意味で、1.0 は 100% と同じ意味になります。

sepia(amount)

これにより、古い写真のようなセピア色が付与されます。適用される「量」は、「グレースケール」フィルタの場合と同じように機能します。つまり、100% にするとすべての色が完全にセピア色になり、値が小さいほど効果が小さい割合で適用されます。

saturate(amount)

色に彩度効果を適用して、より鮮やかに見えるようにします。写真がポスターや漫画のように見えるクールな効果です。この効果では、100% を超える値を使用して、彩度を強調することもできます。かなりファンキーな効果が得られます。

hue-rotate(角度)

これは、興味深い結果を得るために使用できる、色の専門家向けのエフェクトです。色をずらして、入力画像をまったく異なるものにします。カラーホイールの周りのカラー スペクトルが赤色から紫色に変わると想像できる場合、この効果はホイール上の元の色を入力として受け取り、「angle」パラメータで回転させられたホイール上の色を出力カラー値として生成します。そのため、画像内のすべての色が、ホイールの同じ「角度」でシフトされます。もちろんこれを単純化していますが、意味が通じる程度に近いことを願っています。

invert(amount)

この効果は色を反転します。適用する「量」が 100% の場合、出力はフィルムカメラの時代の写真ネガのように見えます。以前と同様に、100% より小さい値を使用すると徐々に反転効果が適用されます。

opacity(amount)

フィルタされたコンテンツを半透明にしたい場合は、この設定が適しています。「amount」値は、出力の不透明度を定義します。値が 100% の場合、完全に不透明になるため、出力は入力とまったく同じになります。値が 100% を下回ると、出力画像の不透明度が下がり（透明度が上がり）、見えにくくなります。そのため、ページ上の他の要素と重なると、その下の要素が見え始めます。「量」が 0% の場合、オブジェクトは完全に消えます。ただし、完全に透明なオブジェクトでもマウスクリックなどのイベントを発生させることができるため、何も表示せずにクリック可能な領域を作成する場合に便利です。

これは、すでにご存じの「opacity」プロパティと同じように機能します。通常、CSS の「opacity」プロパティはハードウェア アクセラレーションされませんが、ハードウェア アクセラレーションを使用してフィルタを実装する一部のブラウザでは、フィルタ バージョンの opacity が高速化され、パフォーマンスが大幅に向上します。

明るさ（量）

これは、テレビの明るさ調整と同じです。「amount」パラメータに比例して、完全に黒から元の色までの色を調整します。この値を 0% に設定すると黒い画像のみが表示されますが、値が 100% に近づくにつれて、元の画像が明るくなり、100% に達すると入力画像と同じになります。もちろん、この値をさらに上げることもできます。200% に設定すると、画像は元の 2 倍の明るさになります。暗い場所で撮影した写真の調整に最適です。

コントラスト(amount)

テレビでさまざまな操作を行えます。これにより、入力画像の最も暗い部分と最も明るい部分の差が調整されます。0% にすると「明るさ」と同じように黒くなるので、あまり面白くありません。ただし、値を 100% に近づけると、暗さの差は変化し、100% に達すると元の画像に戻ります。この効果は 100% を超えても適用できます。その場合、明るい色と暗い色の差がさらに大きくなります。

blur(半径)

コンテンツのエッジを柔らかくしたい場合は、ぼかしを追加できます。これは、かつて映画制作でよく使用されていた、ガラス板にワセリンを塗ってぼかすという古典的な手法に似ています。すべての色が混ざり合い、効果が広がります。目の焦点が合っていないときのような効果です。「radius」パラメータは、画面上のピクセル同士が混ざり合う数に影響します。値が大きいほど、ぼかしが強くなります。0 の場合、画像は変更されません。

drop-shadow（シャドウ）

コンテンツを屋外で撮影したように見せ、地面に影を落とすことができます。これは「ドロップシャドウ」機能によるものです。画像のスナップショットを取得し、単色にしてからぼかし、結果を少しオフセットして元のコンテンツの影のように見せます。渡される「shadow」パラメータは、単一の値よりも少し複雑です。スペース区切りの値の列です。一部の値は省略可能です。「shadow」値は、シャドウの配置場所、ぼかしの適用量、シャドウの色などを制御します。「shadow」値の詳細については、CSS3 の背景仕様で「box-shadow」について詳しく説明しています。以下にいくつかの例を示しますので、さまざまな可能性をご確認ください。

これは、既存の CSS 機能である「box-shadow」プロパティに似た別のフィルタ演算です。フィルタ アプローチを使用すると、上記の「不透明度」操作で説明したように、一部のブラウザでハードウェア アクセラレーションが行われる可能性があります。

SVG フィルタを参照する URL

フィルタは SVG の一部として始まったため、SVG フィルタを使用してコンテンツのスタイルを設定できるはずです。現在の「フィルタ」プロパティの提案では、これは簡単に行えます。SVG のすべてのフィルタは、フィルタ効果を参照するために使用できる「id」属性で定義されます。そのため、CSS から SVG フィルタを使用するには、「url」構文を使ってフィルタを参照するだけです。

たとえば、フィルタの SVG マークアップは次のようになります。

<filter id="foo">...</filter>

次のように CSS で簡単に設定できます。

div { { % mixin filter: url(#foo); % } }

これで、ドキュメント内のすべての <div> に、SVG フィルタ定義によるスタイルが適用されます。

カスタム（近日提供予定）

カスタム フィルタは近日提供される予定です。これらはグラフィック GPU の能力を活用し、特別なシェーディング言語を使用して、想像力に限りなく近い素晴らしい効果を実現します。「フィルタ」仕様のこの部分はまだ議論中であり、流動的ですが、この機能がブラウザに導入され次第、可能な機能について詳しくお知らせします。

パフォーマンスに関する注意事項

ウェブ デベロッパーにとって、ウェブページやアプリケーションのパフォーマンスは重要な要素です。CSS フィルタは視覚効果を実現するための強力なツールですが、サイトのパフォーマンスに影響することもあります。

特に、CSS フィルタをサポートしているモバイル デバイスでサイトを適切に動作させたい場合は、CSS フィルタの機能とパフォーマンスへの影響について理解しておくことが重要です。

まず、すべてのフィルタが同じように作られているわけではありません。実際、ほとんどのフィルタはどのプラットフォームでも非常に高速に実行され、パフォーマンスへの影響はごくわずかです。ただし、ぼかし処理を行うフィルタは、他のフィルタよりも処理に時間がかかります。もちろん、これは「ぼかし」と「ドロップ シャドウ」を意味します。だからといって、使用すべきでないということではなく、その仕組みを理解しておくことが役に立ちます。

blur を実行すると、出力ピクセルの周囲のピクセルの色が混ざり合い、ぼかしが適用された結果が生成されます。たとえば、radius パラメータが 2 の場合、フィルタは各出力ピクセルの周囲の 2 つのピクセルをすべての方向に見て、混合色を生成する必要があります。これは出力ピクセルごとに行われるため、radius を増やすと計算量が増加します。blur はすべての方向を検出するため、「半径」を 2 倍にすると、検出するピクセル数は 4 倍になります。つまり、radius を 2 倍にすると、処理速度は 4 倍に遅くなります。drop-shadow フィルタには効果の一部として blur が含まれているため、shadow パラメータの radius 部分と spread 部分を変更すると、blur と同様に動作します。

blur でも、一部のプラットフォームでは GPU を使用して高速化できるため、すべてが失われるわけではありませんが、すべてのブラウザで利用できるとは限りません。不明な場合は、目的の効果が得られる「半径」をテストし、許容できる視覚効果を維持しながら、半径をできるだけ小さくすることをおすすめします。この方法でサイトを調整することで、特にスマートフォンでサイトを利用するユーザーの満足度を高めることができます。

SVG フィルタを参照する url ベースのフィルタを使用している場合、任意のフィルタ効果が含まれている可能性があるため、効果が遅くなる可能性があることに留意してください。フィルタ効果の仕組みを把握し、モバイル デバイスで試して、パフォーマンスに問題がないことを確認してください。

最新のブラウザで利用可能

現在、WebKit ベースのブラウザと Mozilla で、多くの CSS filter エフェクトが利用可能になっています。近日中に Opera と IE10 でも利用可能になる予定です。この仕様はまだ開発中であるため、一部のブラウザ ベンダーはベンダー プレフィックスを使用してこの機能を実装しています。そのため、WebKit では -webkit-filter を使用し、Mozilla では -moz-filter を使用し、他のブラウザの実装が登場したら注意する必要があります。

すべてのブラウザがすべてのフィルタ効果をすぐにサポートするとは限りません。現在、Mozilla ブラウザは filter: url() 関数のみをサポートしています。この実装は他のエフェクト関数より古いため、ベンダー接頭辞は使用できません。

以下に、さまざまなブラウザで利用可能な CSS フィルタ効果と、ソフトウェアに実装した場合のパフォーマンスの概要を示します。なお、最新のブラウザの多くは、これらをハードウェアに実装するようになっています（GPU アクセラレーションがあります）。これらを GPU サポートでビルドすると、遅いエフェクトのパフォーマンスが大幅に向上します。通常どおり、パフォーマンスを評価するには、さまざまなブラウザでテストするのが最善の方法です。

その他の参考情報

アートワークを試して共有できる、素晴らしいフィルタを使用したインタラクティブな抽象画アプリ Eric Bidelman の優れたインタラクティブ フィルタページをご覧ください 例を含むフィルタに関する優れたチュートリアル W3C Filter Effects 1.0 ドラフト仕様（公式）http://dev.w3.org/fxtf/filters/ フィルタを使用して作成された UI の例