このページは Cloud Translation API によって翻訳されました。

CSS フィルタ効果について

Alex Danilo

はじめに

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

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

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

「filter」CSS プロパティの新しい活用方法

Deja Vu は、CSS スタイルの「フィルタ」がウェブデベロッパーに衝突することがあります。これは、以前のバージョンの Internet Explorer では、CSS 経由で「filter」プロパティを公開していたため、一部のプラットフォーム固有の機能を実行していました。これは非推奨となり、現在は CSS3 の一部である標準の「filter」プロパティに置き換えられました。したがって、古いウェブページで「フィルタ」という言葉が出てきても、混乱する必要はありません。新しい「filter」プロパティにはすべてのアクションが含まれ、新しいバージョンの IE ではすべての最新ブラウザと同じように実装されています。

フィルタの仕組み

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

ブラウザはウェブページを読み込むときに、スタイルを適用し、レイアウトを実行してから、表示対象のページを表示する必要があります。フィルタは、これらのステップがすべて完了し、ページが画面にコピーされる直前に機能します。レンダリングされたページのスナップショットをビットマップ画像として取得し、スナップショット内のピクセルにグラフィックマジックを適用して、その結果を元のページ画像の上に描画します。一つの考え方は、カメラレンズの前面に取り付けたフィルタのようなものです。レンズを通して見えるのは、フィルタの効果で変化した外界です。

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

また、カメラのレンズで多数のフィルタを前面に重ねることができるように、任意の数のフィルタを次々と適用して、あらゆる種類の効果を生み出すことができます。

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

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

ほとんどの CSS フィルタは SVG フィルタで表現できますが、必要に応じて CSS で 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）: これにより、入力画像の色がグレーの色合いに変換されます。[amount] は、適用するグレー変換の量を制御します。100% の場合はすべてのグレーの色合いになり、0% の場合は色は変更されません。パーセンテージではなく浮動小数点数を使用することもできます。たとえば、0 は 0% と同じように機能するが、1.0 は 100% と同じように機能します。

セピア（金額）: これにより、昔の写真のように、受け継がれた色がセピア調になります。[量] を適用すると、[グレースケール] フィルタと同じように機能します。つまり、100% に設定するとすべての色が完全にセピア色になり、値が小さいほど効果の適用範囲が小さくなります。

saturate(amount): 色に彩度効果を適用し、より鮮やかに見えるようにします。写真をポスターや漫画のように見せることができる便利なエフェクトです。100% を超える値を使用して彩度を強くすることもできます。これは、かなりファンキーに見える効果です。

hue-rotate(angle): これは、ちょっとしたカラーオタク効果で、おもしろい結果に使用できます。これは、色をシフトして、入力画像の見た目をまったく異なるものにすることです。カラーホイールの周りの赤から紫に変化するカラースペクトルを想像してみてください。このエフェクトは、ホイール上の元の色を入力として受け取り、それを「angle」パラメータで回転させ、出力カラー値として回転したホイール上の色を生成します。つまり、ホイール上ですべての色が同じ角度だけ移動します。もちろん、これはその動作を単純化したものですが、理にかなっているほど近い内容にできればと考えています。

invert(amount): 色を反転させる効果です。適用した値を 100% に設定すると、昔のカメラのネガティブな出力になります。以前と同様に、100% より小さい値を使用すると、反転効果が段階的に適用されます。

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

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

明るさ（明るさ）: これはテレビの明るさ調整のようなものです。「amount」パラメータに比例して、完全な黒と元の色の間の色を調整します。この値を 0% に設定すると黒だけ表示されますが、値が 100% に近づくにつれて元の画像がますます明るくなり、入力画像と同じ値になる 100% になります。もちろんそのまま使い続けることもできます。たとえば 200% に設定すると画像の明るさが元の 2 倍になるため、暗い場所での撮影に最適な画像になります。

コントラスト（値）: テレビからさまざまな操作を行えます。これにより、入力画像の最も暗い部分と最も明るい部分の差が調整されます。0% を使用すると、「brightness」と同様に黒になります。それほど興味深いものではありません。ただし、値を 100% に向かって増加させると暗さの差は変化し、100% になると元の画像に戻ります。また、このエフェクトを 100% 以上にすることで、明るい色と暗い色の差をさらに大きくすることができます。

blur(radius): コンテンツに柔らかさを加えたい場合は、ぼかしを追加できます。これは、昔の映画化の手法として使われていた、ガラス張りのクラシックなワセリンのようなものです。目の焦点が合っていないときのように、すべての色をひとつに染み、その効果を広げます。「radius」パラメータは、画面上で互いに混ざり合うピクセルの数に影響するため、値を大きくするほどぼかしが強くなります。もちろん、ゼロはイメージは変更されません。

drop-shadow(shadow): コンテンツが日差しの中にあり、その後ろに地面に影がかかっているように見せることができるのは素晴らしいことです。これももちろん「ドロップシャドウ」です。画像のスナップショットを撮り、単色にしてぼかしを入れて、元のコンテンツの影のように見えるようにします。渡される「shadow」パラメータは、単なる値よりも少し複雑です。スペースで区切られた一連の値ですが、オプションの値もあります。「shadow」の値は、シャドウを配置する場所、適用するぼかしの程度、色などを制御します。「shadow」の値の動作の詳細については、CSS3 Backgrounds 仕様で「box-shadow」が定義されています。以下に示すいくつかの例は、さまざまな可能性についてよく理解するのに役立ちます。

ドロップシャドウ（16px 16px 20px 黒） — drop-shadow(16px 16px 20px 黒)

ドロップシャドウ（10 ピクセル～ 16 ピクセル 30 ピクセルの紫） — drop-shadow(10px -16px 30px 紫)

これもフィルタ操作で、「box-shadow」プロパティを介して利用できる既存の CSS 機能と類似しています。フィルタアプローチを使用すると、前述の「opacity」操作で説明したように、一部のブラウザでハードウェアアクセラレーションが行われる可能性があります。

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

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

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

CSS から次のようなシンプルな処理を行うことができます。

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

完了です。ドキュメント内のすべての <div> は、SVG フィルタ定義でスタイル設定されます。

カスタム（近日提供予定）: カスタムフィルタが近日提供予定です。グラフィック GPU の能力を活用して特別なシェーディング言語を使用し、想像力に縛られた驚くべき効果を実現します。「filter」仕様のこの部分はまだ検討中であり、流動的なものですが、お近くのブラウザがこの機能に対応し始めれば、可能なことについてさらに詳しく説明する予定です。

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

すべてのウェブデベロッパーが関心を持っていることの一つは、ウェブページやアプリケーションのパフォーマンスです。CSS フィルタは視覚効果を高める強力なツールですが、サイトのパフォーマンスにも影響する場合があります。

特に、CSS フィルタに対応しているモバイルデバイスでサイトを適切に動作させるには、その効果とそれがパフォーマンスに及ぼす影響を理解することが重要です。

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

blur を実行すると、出力ピクセルの周りのすべてのピクセルの色が混ざり合って、ぼかしの結果が生成されます。たとえば、radius パラメータが 2 の場合、フィルタは、混合色を生成するために、各出力ピクセルの周りのすべての方向の 2 つのピクセルを確認する必要があります。これは出力ピクセルごとに行われるため、多くの計算は radius を増やすと大きくなります。blur はすべての方向を見るため、「半径」を 2 倍にすると、参照するピクセル数を 4 倍にする必要があるため、実際は radius を 2 倍にするごとに 4 倍遅くなります。drop-shadow フィルタには効果の一部として blur が含まれているため、shadow パラメータの radius と spread の部分を変更すると、フィルタも blur と同じように動作します。

blur を使用すれば、すべてが失われることはありません。一部のプラットフォームでは GPU を使用して高速化できますが、すべてのブラウザで利用できるとは限りません。判断に迷う場合は、望ましい効果が得られる「半径」を試し、許容できる視覚効果を維持しながら、できるだけ小さくすることをおすすめします。この方法は、特にスマートフォンからサイトを利用するユーザーの満足度向上につながります。

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

フィルタ効果	ブラウザサポート	パフォーマンス
グレースケール	Chrome	非常に高速
セピア	Chrome	非常に高速
彩度	Chrome	非常に高速
色相回転	Chrome	高速
反転	Chrome	非常に高速
opacity	Chrome	遅くなる場合がある
明るさ	Chrome	高速
コントラスト	Chrome	高速
ぼかし	Chrome	高速化しない限り低速化
drop-shadow	Chrome	遅くなる場合がある
URL（）	Chrome、Mozilla	場合によって異なる、速いものから遅いものへ

その他の参考情報

フィルタを使用したインタラクティブな抽象画アプリケーション。アートワークを試したり共有したりできます Eric Bidelman 氏の優れたインタラクティブフィルタページを必ずご覧ください。フィルタに関する優れたチュートリアルと例 W3C Filter Effects 1.0 公式ドラフト仕様 http://dev.w3.org/fxtf/filters/ サンプルフィルタを使用して作成された UI