【初心者用】CSSをHTMLに読み込む方法は3つ！それぞれについて徹底解説！
susan すーさんのweblog
複数画像に対応可！CSSのfilterプロパティでimgを美しく表示する方法
susan
記事内に商品プロモーションを含む場合があります
今回ご紹介するCSSのfilterプロパティとは、画像にフィルターをかけることでPhotoshopでしかできないような画像加工が、CSSでもできてしまう魔法のようなプロパティです。
本記事では、そんな便利なCSSのfilterプロパティを使って、画像に色や明度、ぼかしを簡単に加える方法をご紹介していきます。
おすすめのプログラミングスクール
DMM WEB CAMP
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
| 入学金 | 0円 |
| 料金 | 169,800円(税込)〜 |
| 学び方 | オンライン(自習形式) |
| 校舎 | ー |
| 保証制度 | 8日間返金保証 早期卒業返金保証 |
| 就職サポート | ○ |
| 運営会社 | 株式会社インフラトップ |
おすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく解説しているので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選
フリーランスエンジニアにおすすめのエージェント
レバテックフリーランス
業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。
| 案件数 | 50,000件以上 |
| リモート | ○ （半分くらいがリモート対応） |
| 単価 | 45万 〜 195万円 |
| 稼働日数 | 週5日が多め |
| 福利厚生 | ◎ |
| 運営会社 | レバテック株式会社 |
フリーランスエンジニア向けのおすすめのエージェントに関してはフリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較で詳しく紹介してますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較
Contents
CSSのfilterプロパティとは
CSSのfilterプロパティは、ウェブページの要素（特に画像や背景）に対してさまざまな視覚効果を適用するためのものです。
これにより、webデザイナーや開発者は画像をPhotoshopなどの画像編集ソフトウェアで編集しなくても、ブラウザ上でリアルタイムに画像を操作できます。
HTMLとCSS学習におすすめの書籍
filterプロパティを使うメリット・デメリット
CSSのfilterプロパティはwebページのデザインに役立つツールですが、使う場合はメリットとデメリットどちらも認識しておくことが大事です。
Filterのメリット
メリット
- 簡単な画像操作
- 複数効果の組み合わせ
- コード量の削減
- パフォーマンスの向上
- ブラウザの互換性
- デザインの自由度
簡単な画像操作
filterプロパティを使用すれば、専用の画像編集ソフトウェアを使わずとも、ブラウザ上でリアルタイムに画像を操作できます。
これにより、色調整、コントラストの変更、ぼかしの追加など、一般的な画像加工が非常に簡単になります。
複数効果の組み合わせ
filterプロパティには複数の効果を一度に適用することができます。
これにより、画像に対して複雑な効果を適用することも簡単にできてしまいます。
コード量の削減
画像を直接編集し、それぞれの状態を保存する代わりに、filterプロパティを使用すれば、画像の状態をコード上で簡単に切り替えることができます。
これにより、必要なコード量とサーバー上の画像数を大幅に削減できます。
パフォーマンスの向上
filterプロパティはブラウザ上でGPUによって処理されるため、パフォーマンスに優れています。
これにより、アニメーションやトランジションと組み合わせた際のパフォーマンスも高いまま維持されます。
ブラウザの互換性
filterプロパティは、主要な現代ブラウザの大半でサポートされていますが、IEなどの一部のブラウザでは利用できません。
filterプロパティに対応しているブラウザ
- Google Chrome
- バージョン18以降、webkit ベンダープレフィックス付きでサポート。バージョン53 以降、プレフィックスなしでサポート。
- Firefox
- バージョン35以降でサポート。
- Safari
- バージョン6以降、webkit ベンダープレフィックス付きでサポート。バージョン9.1以降、プレフィックスなしでサポート。
- Microsoft Edge
- バージョン12以降でサポート。
- Opera
- バージョン15以降、webkit ベンダープレフィックス付きでサポート。バージョン40以降、プレフィックスなしでサポート。
- Internet Explorer
- filterプロパティはサポートされていません。ただし、限定的なフィルタ効果は古い filter プロパティ（非標準）を使用することで適用可能です。
対応ブラウザに関して詳しくはこちら
デザインの自由度
デザイナーは、画像の色相、彩度、コントラスト、ブライトネスなどを微調整することで、webサイトの全体的な雰囲気を自由に操ることができます。
これは特にブランドイメージを強調する場合に有用です。
filterプロパティのデメリット
デメリット
- ブラウザの互換性
- パフォーマンス問題
- 複雑なフィルタ効果
- 色の精度
- アクセシビリティ
ブラウザの互換性
もっとも重要なことは、すべてのブラウザがfilterプロパティをサポートしているわけではないということです。
ほとんどのブラウザでサポートはされていますが、古いバージョンのInternet Explorerなど一部のブラウザでは全くサポートされていません。
そのため、ウェブサイトのユーザーがこれらのブラウザを使用している可能性がある場合は、フィルターが適用されない場合もあります。
パフォーマンス問題
filterプロパティはGPUによって処理されますが、多数のフィルターを大量の要素に適用するとパフォーマンスに影響を与えることがあります。
特に、移動デバイスなどリソースが限られた環境では注意が必要です。
複雑なフィルタ効果
複数のフィルタを組み合わせて複雑な効果を作り出すことは可能ですが、その結果がどのようになるかを予測するのは難しい場合があります。
また、一部のフィルタ（特にblur()やdrop-shadow()）は、要素のレイアウトに影響を与えることがあります。
色の精度
filterプロパティを使用しても、元の画像の色情報を完全に保持するわけではありません。
例えば、明度や彩度を大幅に変更した場合、色の精度が失われる可能性があります。
アクセシビリティ
色の変更や明度の調整などの視覚効果は、視覚障害を持つ人々にとっては理解が難しくなる可能性があります。
そのため、filterプロパティを使用する際は、アクセシビリティも考慮する必要があります。
filterプロパティを使う場面
CSSのfilterプロパティを使用する場面はいくつか考えられます。
以下、いくつかの具体例です。
CSSのfilterを使う場面
- 画像ホバーエフェクト
- モノクロームまたはセピアトーンのエフェクト
- 背景のブラー
- 視覚障害者への配慮
- アニメーションとトランジション
画像ホバーエフェクト
ユーザーが画像にマウスをホバーしたときに、画像が明度を下げたり、色合いが変わったりするエフェクトを追加することができます。
これは、ユーザーにどの要素がインタラクティブであるかを視覚的に示すのに役立ちます。
モノクロームまたはセピアトーンのエフェクト
filterプロパティを使って、画像をグレースケールやセピアトーンに変換することができます。
これは、ウェブサイトの全体的なスタイリングやブランドイメージに一致するように、画像の色調を調整するのに便利です。
背景のブラー
背景画像にブラーを適用して、オーバーレイされたテキストをより読みやすくすることができます。
これは特に大きな背景画像と重なるテキストを用いたヒーローセクションなどでよく見られます。
視覚障害者への配慮
視覚障害者のユーザーのために、特定のコントラスト比を提供するためにfilterを使用することができます。
アニメーションとトランジション
filterプロパティはCSSアニメーションとトランジションと組み合わせることができます。
これにより、フェードイン/アウト、色彩変化、ブラーの強度変化などのエフェクトを適用することができます。
HTMLとCSS学習におすすめの書籍
filterプロパティの実装例
以下、実際にfilterプロパティを実装した場合の画像です。
CSSのfilterの書き方
CSSのfilterの概要を学んだところで、次に具体的な書き方を解説していきます。
基本的な書き方は以下になります。
style.css
1img {
2 filter: grayscale(100%);
3}
この例では、すべてのimg要素に対して100%のグレースケール(白黒)効果が適用されます。
その結果、カラーの画像が白黒の画像に変換されます。
また、CSSのfilterのいいところは複数の視覚効果を一度に適用できるところです。
例えば、画像をグレースケールに変換し、さらにぼかし効果を追加するには以下のように書きます
style.css
1img {
2 filter: grayscale(100%) blur(5px);
3}
この例では、すべてのimg要素に対して100%のグレースケール効果と5ピクセルのぼかし効果が適用されます。
視覚効果はスペースで区切り、左から右へ順に適用されます。
なお、視覚効果を適用しない状態に戻すにはnoneを指定します：
style.css
1img {
2 filter: none;
3}
これはfilterプロパティを初期値に戻すためのもので、すべての視覚効果を取り消します。
CSSのfilterの種類
CSSのfilterにはいくつか種類があります。
filterの種類
- blur
brightness- contrast
- grayscale
- hue-rotate
- invert
- opacity
- saturate
- sepia
- drop-shadow
以下は元画像です。
この画像に色々なfilterをかけていきます。
blur()
blurは指定したピクセル値に基づいて画像や要素にぼかし効果（ブラー）を適用します。
1img {
2 filter: blur(5px);
3}
上記の例では、img要素に5ピクセルのぼかし効果を適用しています。
blurの特徴
- 値の単位
- blurの値は長さを示すもので、ピクセル(px)が一般的です。値が大きいほど、ぼかし効果は強くなります。
- 負の値
- blurは負の値を受け付けません。負の値を入れるとエラーとなります。
- パフォーマンス
- blurは他のfilter関数に比べてレンダリングパフォーマンスに影響を及ぼす可能性があります。特に大きな値を使用した場合や、多数の要素に適用した場合は注意が必要です。
- アルファチャンネル
- blurは要素のアルファチャンネル（透明度）にも影響を及ぼします。つまり、半透明の要素にぼかし効果を適用すると、その透明度もぼかされます。
blurは、背景ぼかし、画像やテキストのぼかし、スクロール時の動的なぼかし効果など、様々なデザインやエフェクトに使用されます。
ただし、上述のパフォーマンスの問題を考慮に入れて使用することが重要です。
brightness()
brightnessは、指定した要素の輝度を調整するのに使用されます。
1img {
2 filter: brightness(200%)
3}
上記の例では、img要素の輝度を200%に設定しています。
これにより、元の画像よりも明るくなります。
brightnessの特徴- 値の範囲
- brightnessの値は数値またはパーセンテージで指定します。値が1または100%の場合、元の画像と同じ輝度になります。値が1より小さい場合（または100%未満の場合）、画像は暗くなります。値が1より大きい場合（または100%より大きい場合）、画像は明るくなります。
- 負の値
- brightnessは負の値を受け付けません。負の値を入れるとエラーとなります。
- 適用可能な要素
- brightnessは画像だけでなく、テキストや背景色などの要素にも適用できます。
brightnessは、画像や要素の視覚的な強調、特定の画像がブランドカラーとマッチするように調整する場合、あるいはユーザーが明るさを調節できるテーマ切替機能など、さまざまな用途で使用されます。
contrast()
contrastは、指定した要素のコントラスト（明るい色と暗い色の差）を調整するのに使用されます。
1img {
2 filter: contrast(150%);
3}
上記の例では、img要素のコントラストを150%に設定しています。
これにより、元の画像のコントラストよりも強調されます。
contrastの特徴
- 値の範囲
- contrastの値は数値またはパーセンテージで指定します。値が1または100%の場合、元の画像と同じコントラストになります。値が1より小さい場合（または100%未満の場合）、画像のコントラストは減少します。値が1より大きい場合（または100%より大きい場合）、画像のコントラストは増加します。
- 負の値
- contrastは負の値を受け付けません。負の値を入れるとエラーとなります。
- 適用可能な要素
- contrastは画像だけでなく、テキストや背景色などの要素にも適用できます。
contrastは、画像やテキストの視覚的な強調、特定の視覚障害者向けの表示設定、あるいはデザインの一部としてコントラストを強調する場合など、さまざまな用途で使用されます。
grayscale()
grayscaleは、要素の色をグレースケール（白黒）に変換するのに使用されます。
1img {
2 filter: grayscale(100%);
3}
上記の例では、img要素を完全にグレースケール100%に変換しています。
grayscaleの特徴
- 値の範囲
- grayscaleの値は数値またはパーセンテージで指定します。値が1または100%の場合、要素は完全なグレースケールになります。値が0または0%の場合、要素は元の色を保ちます。値が0と1（または0%と100%）の間の場合、要素は部分的にグレースケールになります。
- 負の値
- grayscaleは負の値を受け付けません。負の値を入れるとエラーとなります。
grayscaleは、特定のブランドスタイルやデザイン要件に合わせて色を調整する、ユーザーがカラーブラインドモードを選択できるようにする、あるいは特定の要素を強調または非強調するために使用するなど、多様な用途で使われます。
hue-rotate()
hue-rotateは、画像や要素の色相（Hue）を回転させるのに使用されます。
1img {
2 filter: hue-rotate(90deg);
3}
上記の例では、img要素の色相を90度回転させています。
hue-rotateの特徴
- 値の範囲
- hue-rotateの値は角度を示すもので、度（deg）、ラジアン（rad）、またはターン（turn）で指定します。値が0deg（または0radや0turn）の場合、元の色相を保ちます。値が360deg（または2pi radや1turn）の場合、色相が一周回転し、結果として元の色に戻ります。
- 負の値
- hue-rotatは負の値も受け付けます。負の値を指定すると、色相が反時計回りに回転します。
hue-rotateは、特定のブランドスタイルやデザイン要件に合わせて色を調整する、特定の要素を視覚的に強調する、あるいはユーザーがカラーテーマをカスタマイズする際に使用するなど、多様な用途で使われます。
invert()
invertは、指定した要素の色を反転するのに使用されます。
1img {
2 filter: invert(100%);
3}
上記の例では、img要素の色を完全に反転させています。
invertの特徴
- 値の範囲
- invertの値は数値またはパーセンテージで指定します。値が1または100%の場合、要素は完全に反転します（白は黒に、黒は白になります）。値が0または0%の場合、要素は元の色を保ちます。値が0と1（または0%と100%）の間の場合、要素は部分的に反転します。
- 負の値
- invertは負の値を受け付けません。負の値を入れるとエラーとなります。
invertは、ダークモードとライトモードの切り替え、特定の視覚効果のための色の反転、または視覚的な強調や非強調のために使用するなど、多様な用途で使われます。
opacity()
opacityは、指定した要素の不透明度（透明度の反対）を調整するのに使用されます。
1img {
2 filter: opacity(50%);
3}
上記の例では、img要素の不透明度を50%に設定しています。
これにより、元の画像が半透明になります。
opacityの特徴
- 値の範囲
- opacityの値は数値またはパーセンテージで指定します。値が1または100%の場合、要素は完全に不透明になります（透明度が0）。値が0または0%の場合、要素は完全に透明になります。値が0と1（または0%と100%）の間の場合、要素の不透明度は部分的になります。
- 負の値
- opacityは負の値を受け付けません。負の値を入れるとエラーとなります。
opacityは、特定の視覚効果のための透明度の調整、要素の視覚的な強調や非強調、またはホバーエフェクトや遷移エフェクトの一部として使用するなど、多様な用途で使われます。
ただし、opacityは要素全体の不透明度を変更しますので、テキストと背景の両方が透明になるなど、予期しない結果をもたらすことがあります。
これを避けるためには、背景とテキストを別々の要素として扱い、それぞれに異なる不透明度を設定すると良いでしょう。
saturate()
saturateは、指定した要素の色彩の飽和度（Saturation）を調整するのに使用されます。
1img {
2 filter: saturate(200%);
3}
上記の例では、img要素の色彩飽和度を200%に設定しています。
これにより、元の画像よりも色が鮮やかになります。
saturateの特徴
- 値の範囲
- saturateの値は数値またはパーセンテージで指定します。値が1または100%の場合、要素は元の色彩飽和度を保ちます。値が0または0%の場合、要素は完全に非飽和（つまりグレースケール）になります。値が1より大きい場合（または100%より大きい場合）、要素の色彩飽和度は増加します。
- 負の値
- saturateは負の値を受け付けません。負の値を入れるとエラーとなります。
saturateは、特定の視覚効果のための色彩調整、特定の要素の視覚的な強調、またはブランドスタイルやデザイン要件に合わせた色調整など、多様な用途で使われます。
sepia()
sepiaは、指定した要素にセピア調（古風な茶色っぽい色）の効果を適用するのに使用されます。
1img {
2 filter: sepia(50%);
3}
上記の例では、img要素に完全なセピア調の効果を適用しています。
sepiaの特徴
- 値の範囲
- sepiaの値は数値またはパーセンテージで指定します。値が1または100%の場合、要素は完全にセピア調になります。値が0または0%の場合、要素は元の色を保ちます。値が0と1（または0%と100%）の間の場合、要素は部分的にセピア調になります。
- 負の値
- sepiaは負の値を受け付けません。負の値を入れるとエラーとなります。
sepiaは、特定の視覚効果のための色彩調整、特定のブランドスタイルやデザイン要件に合わせた色調整、または特定の要素の視覚的な強調や非強調のために使用するなど、多様な用途で使われます。
例えば、古風な雰囲気を出すために画像にセピア調の効果を適用することができます。
drop-shadow()
drop-shadowは、指定した要素に影を追加するのに使用されます。
1img {
2 filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
3}
上記の例では、img要素に対して、水平方向に10px、垂直方向に10pxずらした影を追加しています。
また、この影のぼかし半径は5pxで、色は半透明の黒（rgba(0,0,0,0.5)）です。
drop-shadowの特徴
- 引数
- drop-shadowは4つの引数を受け取ります：x-offset、y-offset、blur-radius、そしてcolor。x-offsetとy-offsetは影の位置を指定します。blur-radiusは影のぼかし半径を指定します。colorは影の色を指定します。これらの引数は、box-shadowプロパティの引数と同様に機能します。
- アルファチャネル
- drop-shadowで使用される色はアルファチャネル（透明度）を持つことができます。これにより、影の透明度を調整できます。
- 非透明な部分のみに影響
- drop-shadowは要素の非透明な部分（または半透明な部分）にのみ影を適用します。つまり、透明な部分には影が適用されません。
引数の種類
x-offset：水平方向への幅y-offset：垂直方向への高さblur-radius：影がどれくらいぼかされるべきかを指定spread-radius：影がどれだけ広がるかを指定
drop-shadowは、要素に深みを追加する、特定の視覚効果を作成する、または要素を背景から視覚的に区別するために使用されます。
また、drop-shadowは他のfilter関数と組み合わせて使用することができ、複雑な視覚効果を作成することも可能です。
HTMLとCSS学習におすすめの書籍
まとめ
今回は、CSSのfilterプロパティを使用した画像の加工方法を紹介しました。
この強力なツールを使えば、色相や明度を簡単に調整し、ウェブページの印象を大きく変えることが可能です。
ほとんどの現代ブラウザで対応しており、コードもシンプルです。ぜひ試していただいて、webデザインの幅を広げていただけたらと思います。
コーディングやプログラミングを勉強したい方はこちらの記事がおすすめ
レンタルサーバーをお探しの方はこちらの記事がおすすめ
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
