SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのfilterの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:26動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フィルターです。
  4. 0:06写真アプリで写真に加工を加えるように、ブラウザー上の要素の見た目を、ぼかしたり、
  5. 0:11白黒にしたり、明るくしたりできるプロパティです。
  6. 0:16対象は画像だけではありません。
  7. 0:18色の付いた箱や文字など、さまざまな要素に使えます。
  8. 0:22ポイントは、元の画像ファイルそのものを編集しなくても、シーエスエスの指定ひとつで表示だけを変えられることです。
  9. 0:31この動画では、代表的な値であるグレースケールとノーンを比べながら、関数の種類や組み合わせ方、
  10. 0:37効かないときの確認まで順番に見ていきます。
  11. 0:42まず基本の書き方です。
  12. 0:44スライドのように、対象のクラスにフィルターと関数の値を書くだけです。
  13. 0:49プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  14. 0:55値の中心になるのは関数で、関数名の直後にカッコを付け、その中に強さの目安となる数値を入れるのが基本の形です。
  15. 1:04仕様上の初期値はノーンで、これは何の効果もかけないという意味です。
  16. 1:09通常は親から子へ継承しません。
  17. 1:12親に掛けた場合は、親の見た目全体として子も一緒に加工されて見える点と混同しないようにしましょう。
  18. 1:19フィルターには、色そのものを変える関数がそろっています。
  19. 1:25まずグレースケールは、彩度を落として白黒に近づける関数です。
  20. 1:31カッコの中が一なら完全な白黒、〇・五なら半分だけ色が残ります。
  21. 1:37セピアは、写真を少し茶色っぽくして、懐かしい雰囲気にする関数です。
  22. 1:43インバートは色を反転させ、明るい部分と暗い部分、色合いが反対になります。
  23. 1:50ヒューローテートは、色相環をぐるりと回すように色味全体をずらす関数で、角度で指定します。
  24. 1:59色だけを変えたいときは、まずこのグループから目的に合うものを選ぶと分かりやすくなります。
  25. 2:07次は、明るさや鮮やかさを調整する関数です。
  26. 2:11ブライトネスは全体の明るさを変えます。
  27. 2:13一が元の明るさで、それより大きくすると明るく、小さくすると暗くなります。
  28. 2:19コントラストは、明るい部分と暗い部分の差の強さです。
  29. 2:23大きくするとメリハリが強くなり、小さくすると全体が灰色に寄って平たく見えます。
  30. 2:29サチュレートは色の鮮やかさで、大きくすると派手に、小さくするとくすんだ色合いになります。
  31. 2:36これらは写真の補正でよく使う考え方そのものです。
  32. 2:40一度に大きく変えるより、少しずつ数値を動かして、文字の読みやすさを保てているか確かめながら調整しましょう。
  33. 2:48見た目の印象を大きく変える関数が、ブラーとドロップシャドウです。
  34. 2:53ブラーは要素全体をぼかす関数で、カッコの中はピクセルなどの長さで指定します。
  35. 2:58数値が大きいほどぼけ具合が強くなります。
  36. 3:01背景だけをぼかして前面の文字を目立たせる、といった使い方でよく見かけます。
  37. 3:07ドロップシャドウは、要素の輪郭の形に沿って影を落とす関数です。
  38. 3:11四角い箱ではない、文字や切り抜き画像にも形に合った影が付くのが特徴です。
  39. 3:17ただし、大きな画像や沢山の要素への強いぼかしは描画の負荷が大きくなりやすいので、
  40. 3:21実際の端末での動きも確認してください。
  41. 3:26フィルターは、一度にひとつの効果だけとは限りません。
  42. 3:30関数と関数の間を半角スペースで区切れば、複数の効果をまとめて指定できます。
  43. 3:37そのとき大切なのが順番です。
  44. 3:40関数は書かれた順、つまり左から順番に適用されていきます。
  45. 3:45たとえば先に明るさを変えてから白黒にするのと、先に白黒にしてから明るさを変えるのでは、
  46. 3:51最終的な見え方が違ってくる場合があります。
  47. 3:56記事でも、複数の関数は順番によって結果が変わる点が注意として挙げられています。
  48. 4:04思った見た目にならないときは、数値だけでなく、関数の並び順も一緒に見直してみましょう。
  49. 4:11ここからは実例です。
  50. 4:13土台として、ステージという親の中に、デモという箱を置きます。
  51. 4:18その中には、折り返しが確認できる程度の文章を入れます。
  52. 4:23デモには内側の余白と、濃い緑色の枠線、薄い黄緑色の背景を付けて、色のある要素にしておきます。
  53. 4:31これは大切な準備です。
  54. 4:33今回比べるグレースケールは色をなくす効果なので、もともと色のない要素では変化がほとんど分かりません。
  55. 4:42色がはっきり付いた状態を作って初めて、白黒への変化が目で追えるようになります。
  56. 4:48土台の指定はそのままに、最後のフィルターの一行だけを切り替えて比べていきます。
  57. 4:55土台ができたら、今回変更する一行を加えます。
  58. 4:59デモにフィルター、グレースケール一を指定します。
  59. 5:03すると、薄い黄緑だった背景も、濃い緑だった枠線も、すべて彩度がなくなり、
  60. 5:07白から黒までの濃淡だけで表現されるようになります。
  61. 5:12一方の、箱の大きさ、余白、枠線の太さ、中の文章の内容や折り返しは、まったく変わりません。
  62. 5:19つまりフィルターは、レイアウトには手を付けず、見た目の色や質感だけを変える仕組みだということが、
  63. 5:24この一例でよく分かります。
  64. 5:29ホバーしたときだけ白黒を外す、といった使い方の土台にもなる指定です。
  65. 5:35では、最後の一行の値だけをノーンに変えてみましょう。
  66. 5:39他の指定はすべて同じです。
  67. 5:41今度は白黒の効果がすべて解除されて、背景の黄緑も、枠線の緑も、元のカラーの状態にすぐ戻ります。
  68. 5:48ノーンは、フィルターを掛けない、という意味の値で、初期値でもあります。
  69. 5:54普段はカラーで見せておき、特定の状態のときだけ効果を掛ける、あるいは掛けた効果を取り消す、
  70. 5:59といった切り替えの場面で、このノーンが受け皿になります。
  71. 6:05グレースケール一とノーン、この二つを往復できるようになれば、このプロパティの基本操作は押さえたと言えます。
  72. 6:13効かないと感じたときの確認です。
  73. 6:15まず多いのは書き方のミスです。
  74. 6:17関数名のつづり、カッコの閉じ忘れ、単位が必要な場所での単位の付け忘れがあると、
  75. 6:21宣言全体が無効になってしまいます。
  76. 6:25次に、開発者ツールで順番に調べます。
  77. 6:27ネットワークでスタイルシートが読み込めているか、エレメンツでクラスとセレクターが一致しているか、
  78. 6:34スタイルズで宣言が打ち消されていないか、そしてコンピューテッドで最終的な値を確認します。
  79. 6:40あわせて、大きな画像への強いぼかしで表示が重くなっていないか、三百二十ピクセル程度の狭い画面や文字拡大でも内容が使えるかも見ておきましょう。
  80. 6:50最後に互換性とまとめです。
  81. 6:51フィルターは、クローム五十三以降、エッジ十二以降、ファイアフォックス三十五以降、
  82. 6:56サファリ九・一以降と、主要ブラウザーで広く対応しています。
  83. 7:01今回比べたノーン自体は、さらに古い版から使えます。
  84. 7:04まとめます。
  85. 7:05このプロパティは、色、明るさ、ぼかしなどを関数で指定して、レイアウトを変えずに見た目だけを加工するもので、
  86. 7:10初期値はノーン、継承はしませんでした。
  87. 7:15練習として、実例でグレースケール一とノーンの違いを言葉で説明し、次にブライトネスなどを一つだけ加えて変化を比べてみてください。
  88. 7:24お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

filterの役割と主な指定値を解説。色の付いた要素がグレースケールへ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのfilterの使い方：指定値・実例・効かない原因とブラウザー互換性 →