（最終更新月：2023年6月）
✔このような方へ向けて書かれた記事となります
「css filterって何ができるのだろうか？」
「css filterの書き方が知りたい」
「css filterの実例が見たい」
✔当記事を通じてお伝えすること
- css filterの基本概念
- css filterの書き方やその応用
- css filterの実例
当記事では、css filterの基本から応用的な使い方まで、具体的な例を用いてわかりやすく解説しています。
最後までお読みいただくことで、css filterを効果的に活用できるようになります。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
CSS Filterの基本
ここでは、CSS Filterを使用するための基本的な構文について解説します。
具体的なコード例を交えながら、filterプロパティの使い方や、異なるフィルター関数を組み合わせる方法を説明します。
- CSS Filterとは
- filterプロパティの構文
- 補間と組み合わせ方
- 使用例
CSS Filterとは
CSS Filterは、ウェブページの要素に対してさまざまな視覚効果を付与できるパワフルなツールです。
以下のような画像に対する一般的な効果を直接ブラウザ上で実装します。
- ブラー
- 明度調整
- コントラスト調整
ウェブページの体験を向上させ、ユーザーの注目を集められるのです。
filterプロパティの構文
CSS Filterは、HTML要素にfilterプロパティを適用することで実現可能です。
セレクタ {
filter: <フィルター関数> [<フィルター関数>]*;
}filterプロパティは、ひとつまたは複数のフィルター関数を受け取ります。
フィルター関数の構文はこちらです。
<フィルター関数>(<値>)各フィルター関数は、特定の視覚効果を生成し、関数の引数で、その効果の度合いを調整できます。
要素に5ピクセルのブラー効果を適用する例です。
filter: blur(5px);補間と組み合わせ方
フィルター関数は、複数同時に使用できます。
ひとつの要素に対して、複数の視覚効果を組み合わせて適用することが可能です。
複数のフィルター関数を、ひとつのfilterプロパティ内にスペースで区切って記述します。
アニメーション効果を適用するために、transitionプロパティや@keyframesルールで、フィルター効果の度合いを時間的に変化させましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.example-element {
width: 300px;
height: 300px;
background-color: red;
filter: grayscale(100%) blur(5px);
transition: filter 1s ease-in-out;
}
.example-element:hover {
filter: none;
}
</style>
</head>
<body>
<div class="example-element"></div>
</body>
</html>使用例
CSS Filterの基本的な使用例をご覧ください。
この例では、画像要素に対して、ブラー効果と明度の調整を同時におこなっています。
img {
filter: blur(5px) brightness(0.8);
}このコードは、指定した画像に5ピクセルのブラー効果を適用し、さらにその明度を80%に調整します
画像は少しぼやけ、そして少し暗く見えます。
フィルター関数まとめ
CSS Filterは、さまざまなフィルター関数を提供しています。
それぞれの関数は独自の視覚効果を生成し、画像や要素に多様な変化をもたらせます。
- blur(): ぼんやりさせる効果
- brightness(): 明るさを調節
- contrast(): コントラストを強調
- drop-shadow(): 影を追加
- grayscale(): グレースケール化
- hue-rotate(): 色相の変更
- invert(): 色を反転させる
- opacity(): 透明度を変更
- saturate(): 彩度を上げる
- sepia(): セピア調に変換
blur(): ぼんやりさせる効果
指定した画像または要素をぼんやりとさせる効果
ひとつのパラメータを取り、そのパラメータはブラー効果の範囲をピクセル単位で指定します。
blur(5px)とし、5ピクセルのブラー効果が適用される例です。
img {
filter: blur(5px);
}写真の一部を焦点外しにする、あるいは背景をやさしくぼかすなどの効果を作り出すのに役立ちます。
brightness(): 明るさを調節
要素の明るさを調整
パーセントまたは数値で指定してください。
100%（または1）が元の明るさを表し、それ以上の値は明るく、それ以下の値は暗くなることを意味します。
img {
filter: brightness(80%);
}画像の明るさが80%に調整され、元の画像よりも暗くなります。
contrast(): コントラストを強調
要素のコントラスト（色や明暗の強さ）を強調
パーセントまたは数値で指定しましょう。
100%（または1）が元のコントラストを表し、それ以上の値はコントラストを強く、それ以下の値はコントラストを弱くします。
img {
filter: contrast(120%);
}画像のコントラストが元の120%に増加し、色の差がより顕著になります。
drop-shadow(): 影を追加
要素に影を追加
box-shadow CSSプロパティと似ていますが、drop-shadow()は要素全体に影を追加するため、透明部分も影の影響を受けます。
この関数は少なくとも2つの引数を必要とし、3つ目の引数（ブラーの大きさ）と4つ目の引数（色）もオプションで指定可能です。
img {
filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}画像に右下方向に10pxずれた、5pxぼかしの半透明の黒色の影が追加されます。
grayscale(): グレースケール化
色のある要素をグレースケール（白黒）に変換
引数はパーセンテージまたは数値で、100%（または1）で完全なグレースケール、0%（または0）で元の色を表します。
img {
filter: grayscale(100%);
}画像が完全にグレースケール化します。色調の強調やモノクロのエフェクトを作成する際に役立ちます。
hue-rotate(): 色相の変更
色相を回転させて色を変更
引数は角度（deg）で、0degが元の色を保ち、360degで一周回って元の色に戻ります。
img {
filter: hue-rotate(90deg);
}上記のコードでは、画像の色相が90度回転します。
さまざまな色効果を作成するために利用可能です。
invert(): 色を反転させる
要素の色を反転
引数はパーセンテージまたは数値で、100%（または1）で完全な色反転、0%（または0）で元の色を表します。
img {
filter: invert(100%);
}上記のコードでは、画像の色が完全に反転します。
これは特にダークモードやライトモードの切り替えに役立つエフェクトです。
opacity(): 透明度を変更
要素の透明度を変更
引数はパーセンテージまたは数値で設定します。
100%（または1）で完全に不透明、0%（または0）で完全に透明、です。
img {
filter: opacity(50%);
}画像を半透明にしています。
この関数は画像の重ね合わせや透明なレイヤーを作成する際に役立ちます。
saturate(): 彩度を上げる
要素の彩度を上げる
引数はパーセンテージまたは数値です。
100%（または1）で元の色を保ち、それ以上の値では彩度が増加します。
img {
filter: saturate(200%);
}画像の彩度が2倍に増加します。
これは色彩を強調したい場合に有用です。
sepia(): セピア調に変換
色のある要素をセピア調に変換
引数はパーセンテージまたは数値です。
100%（または1）で完全なセピア調、0%（または0）で元の色を表します。
img {
filter: sepia(100%);
}画像が完全にセピア調になります。
これは写真のレトロなエフェクトを作成する際に役立ちます。
実践編: CSS Filterの応用
CSS Filterの応用した使い方を見ていきましょう。
実践での例を見ることで、すぐに使えるようになります。
- フィルター関数同士の組み合わせ
- SVGフィルターとCSS Filterの併用
- 効果的なリンクスタイル
フィルター関数同士の組み合わせ
CSS Filterの強力な特徴のひとつは、複数のフィルター関数を組み合わせられる点です。
これにより、単一の関数では達成できない複雑なエフェクトを作成できます。
例えば下記のコードでは、brightness()とsaturate()を組み合わせて、明るくて鮮やかな画像を作成しています。
img {
filter: brightness(150%) saturate(200%);
}SVGフィルターとCSS Filterの併用
CSS FilterとSVGフィルターを併用することで、より高度な視覚効果の達成が可能。
SVGフィルターは、ブラー、明るさ、コントラストなど、CSS Filterと似たような機能を持っていますが、より細かく制御できます。
<!DOCTYPE html>
<html>
<head>
<style>
.example-element {
width: 300px;
height: 300px;
background-image: url('image.jpg');
filter: grayscale(100%) blur(5px);
}
</style>
<svg width="0" height="0">
<defs>
<filter id="svg-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feColorMatrix
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0"
/>
</filter>
</defs>
</svg>
</head>
<body>
<div class="example-element"></div>
</body>
</html>そのため、CSS FilterとSVGフィルターを組み合わせて使用することで、さまざまな視覚効果を表現することができます。
効果的なリンクスタイル
CSS Filterは、リンクのスタイル付けにも利用できます。
例えばマウスオーバー時にフィルターエフェクトを適用することで、ユーザーにリンクを強調表示できます。
a {
transition: 0.3s;
}
a:hover {
filter: brightness(120%);
}このコードでは、リンクにマウスを乗せると明るさが増し、リンクが強調表示されます。
これはユーザーの注目を引くのに非常に役立つ技術です。
CSS Filterの公式定義と形式文法
CSS Filterについて、公式な情報を紹介します。
もし困ったことがあれば、目を通してみてください。
- W3C公式定義
- 標準形式文法
W3C公式定義
CSS FilterはW3Cによって公式に定義されています。
W3C(W3C: World Wide Web Consortium)は、ウェブに関連する標準を制定する国際コンソーシアムです。
CSS Filterの詳細な仕様については、W3Cの公式文書CSS Filter Module Level 1を参照してください。
この文書には、フィルター関数の詳細な説明と使用方法、さらには各ブラウザでの実装状況などが記載されています。
標準形式文法
CSS Filterの形式文法は比較的シンプルです。
基本的には filter: 関数名(値); の形で記述します。
複数のフィルターを適用する場合には、それらをスペースで区切ります。値の単位は関数によりますが、大抵の場合はパーセント (%) やピクセル (px) が使用されます。
また、特定の関数では角度 (deg) を指定することもあります。
まとめ
CSS Filterを使いこなすために、以下を説明してきました。
- フィルター関数の特性
- フィルター関数がどのように画像や要素に影響を与えるのか
- 複数のフィルター関数を組み合わせ方
- SVGフィルターやアニメーションと組み合わせた、ユニークなエフェクト例
CSS Filterは強力な視覚表現を可能にしますが、一方でパフォーマンスへの影響やアクセシビリティについても考慮しなければなりません。
とくに複雑なフィルターエフェクトは、レンダリングに時間がかかる場合があります。
そのため、エフェクトがユーザーの体験を損ねるようであれば、使用を見送るか、最適化が必要です。
いろいろと試しつつ、より豊かなウェブ表現を作り出してみてください。