WEBVTT

1
00:00:00.000 --> 00:00:00.958
こんにちは。

2
00:00:00.958 --> 00:00:03.831
シーエスエス、リファレンス解説です。

3
00:00:03.831 --> 00:00:06.385
今回のテーマは、フィルターです。

4
00:00:06.385 --> 00:00:11.493
写真アプリで写真に加工を加えるように、ブラウザー上の要素の見た目を、ぼかしたり、

5
00:00:11.493 --> 00:00:16.601
白黒にしたり、明るくしたりできるプロパティです。

6
00:00:16.601 --> 00:00:18.995
対象は画像だけではありません。

7
00:00:18.995 --> 00:00:22.986
色の付いた箱や文字など、さまざまな要素に使えます。

8
00:00:22.986 --> 00:00:31.765
ポイントは、元の画像ファイルそのものを編集しなくても、シーエスエスの指定ひとつで表示だけを変えられることです。

9
00:00:31.765 --> 00:00:37.113
この動画では、代表的な値であるグレースケールとノーンを比べながら、関数の種類や組み合わせ方、

10
00:00:37.113 --> 00:00:42.460
効かないときの確認まで順番に見ていきます。

11
00:00:42.460 --> 00:00:44.206
まず基本の書き方です。

12
00:00:44.206 --> 00:00:49.603
スライドのように、対象のクラスにフィルターと関数の値を書くだけです。

13
00:00:49.603 --> 00:00:55.951
プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。

14
00:00:55.951 --> 00:01:04.523
値の中心になるのは関数で、関数名の直後にカッコを付け、その中に強さの目安となる数値を入れるのが基本の形です。

15
00:01:04.523 --> 00:01:09.760
仕様上の初期値はノーンで、これは何の効果もかけないという意味です。

16
00:01:09.760 --> 00:01:12.141
通常は親から子へ継承しません。

17
00:01:12.141 --> 00:01:19.760
親に掛けた場合は、親の見た目全体として子も一緒に加工されて見える点と混同しないようにしましょう。

18
00:01:19.760 --> 00:01:25.227
フィルターには、色そのものを変える関数がそろっています。

19
00:01:25.227 --> 00:01:31.084
まずグレースケールは、彩度を落として白黒に近づける関数です。

20
00:01:31.084 --> 00:01:37.136
カッコの中が一なら完全な白黒、〇・五なら半分だけ色が残ります。

21
00:01:37.136 --> 00:01:43.579
セピアは、写真を少し茶色っぽくして、懐かしい雰囲気にする関数です。

22
00:01:43.579 --> 00:01:50.607
インバートは色を反転させ、明るい部分と暗い部分、色合いが反対になります。

23
00:01:50.607 --> 00:01:59.198
ヒューローテートは、色相環をぐるりと回すように色味全体をずらす関数で、角度で指定します。

24
00:01:59.198 --> 00:02:07.788
色だけを変えたいときは、まずこのグループから目的に合うものを選ぶと分かりやすくなります。

25
00:02:07.788 --> 00:02:11.037
次は、明るさや鮮やかさを調整する関数です。

26
00:02:11.037 --> 00:02:13.977
ブライトネスは全体の明るさを変えます。

27
00:02:13.977 --> 00:02:19.548
一が元の明るさで、それより大きくすると明るく、小さくすると暗くなります。

28
00:02:19.548 --> 00:02:23.571
コントラストは、明るい部分と暗い部分の差の強さです。

29
00:02:23.571 --> 00:02:29.605
大きくするとメリハリが強くなり、小さくすると全体が灰色に寄って平たく見えます。

30
00:02:29.605 --> 00:02:36.414
サチュレートは色の鮮やかさで、大きくすると派手に、小さくするとくすんだ色合いになります。

31
00:02:36.414 --> 00:02:40.127
これらは写真の補正でよく使う考え方そのものです。

32
00:02:40.127 --> 00:02:48.328
一度に大きく変えるより、少しずつ数値を動かして、文字の読みやすさを保てているか確かめながら調整しましょう。

33
00:02:48.328 --> 00:02:53.097
見た目の印象を大きく変える関数が、ブラーとドロップシャドウです。

34
00:02:53.097 --> 00:02:58.761
ブラーは要素全体をぼかす関数で、カッコの中はピクセルなどの長さで指定します。

35
00:02:58.761 --> 00:03:01.742
数値が大きいほどぼけ具合が強くなります。

36
00:03:01.742 --> 00:03:07.257
背景だけをぼかして前面の文字を目立たせる、といった使い方でよく見かけます。

37
00:03:07.257 --> 00:03:11.877
ドロップシャドウは、要素の輪郭の形に沿って影を落とす関数です。

38
00:03:11.877 --> 00:03:17.242
四角い箱ではない、文字や切り抜き画像にも形に合った影が付くのが特徴です。

39
00:03:17.242 --> 00:03:21.639
ただし、大きな画像や沢山の要素への強いぼかしは描画の負荷が大きくなりやすいので、

40
00:03:21.639 --> 00:03:26.036
実際の端末での動きも確認してください。

41
00:03:26.036 --> 00:03:30.787
フィルターは、一度にひとつの効果だけとは限りません。

42
00:03:30.787 --> 00:03:37.549
関数と関数の間を半角スペースで区切れば、複数の効果をまとめて指定できます。

43
00:03:37.549 --> 00:03:40.107
そのとき大切なのが順番です。

44
00:03:40.107 --> 00:03:45.224
関数は書かれた順、つまり左から順番に適用されていきます。

45
00:03:45.224 --> 00:03:51.072
たとえば先に明るさを変えてから白黒にするのと、先に白黒にしてから明るさを変えるのでは、

46
00:03:51.072 --> 00:03:56.919
最終的な見え方が違ってくる場合があります。

47
00:03:56.919 --> 00:04:04.046
記事でも、複数の関数は順番によって結果が変わる点が注意として挙げられています。

48
00:04:04.046 --> 00:04:11.904
思った見た目にならないときは、数値だけでなく、関数の並び順も一緒に見直してみましょう。

49
00:04:11.904 --> 00:04:13.641
ここからは実例です。

50
00:04:13.641 --> 00:04:18.853
土台として、ステージという親の中に、デモという箱を置きます。

51
00:04:18.853 --> 00:04:23.544
その中には、折り返しが確認できる程度の文章を入れます。

52
00:04:23.544 --> 00:04:31.536
デモには内側の余白と、濃い緑色の枠線、薄い黄緑色の背景を付けて、色のある要素にしておきます。

53
00:04:31.536 --> 00:04:33.447
これは大切な準備です。

54
00:04:33.447 --> 00:04:42.133
今回比べるグレースケールは色をなくす効果なので、もともと色のない要素では変化がほとんど分かりません。

55
00:04:42.133 --> 00:04:48.909
色がはっきり付いた状態を作って初めて、白黒への変化が目で追えるようになります。

56
00:04:48.909 --> 00:04:55.684
土台の指定はそのままに、最後のフィルターの一行だけを切り替えて比べていきます。

57
00:04:55.684 --> 00:04:59.217
土台ができたら、今回変更する一行を加えます。

58
00:04:59.217 --> 00:05:03.072
デモにフィルター、グレースケール一を指定します。

59
00:05:03.072 --> 00:05:07.970
すると、薄い黄緑だった背景も、濃い緑だった枠線も、すべて彩度がなくなり、

60
00:05:07.970 --> 00:05:12.868
白から黒までの濃淡だけで表現されるようになります。

61
00:05:12.868 --> 00:05:19.935
一方の、箱の大きさ、余白、枠線の太さ、中の文章の内容や折り返しは、まったく変わりません。

62
00:05:19.935 --> 00:05:24.833
つまりフィルターは、レイアウトには手を付けず、見た目の色や質感だけを変える仕組みだということが、

63
00:05:24.833 --> 00:05:29.732
この一例でよく分かります。

64
00:05:29.732 --> 00:05:35.192
ホバーしたときだけ白黒を外す、といった使い方の土台にもなる指定です。

65
00:05:35.192 --> 00:05:39.237
では、最後の一行の値だけをノーンに変えてみましょう。

66
00:05:39.237 --> 00:05:41.260
他の指定はすべて同じです。

67
00:05:41.260 --> 00:05:48.572
今度は白黒の効果がすべて解除されて、背景の黄緑も、枠線の緑も、元のカラーの状態にすぐ戻ります。

68
00:05:48.572 --> 00:05:54.017
ノーンは、フィルターを掛けない、という意味の値で、初期値でもあります。

69
00:05:54.017 --> 00:05:59.696
普段はカラーで見せておき、特定の状態のときだけ効果を掛ける、あるいは掛けた効果を取り消す、

70
00:05:59.696 --> 00:06:05.374
といった切り替えの場面で、このノーンが受け皿になります。

71
00:06:05.374 --> 00:06:13.620
グレースケール一とノーン、この二つを往復できるようになれば、このプロパティの基本操作は押さえたと言えます。

72
00:06:13.620 --> 00:06:15.808
効かないと感じたときの確認です。

73
00:06:15.808 --> 00:06:17.859
まず多いのは書き方のミスです。

74
00:06:17.859 --> 00:06:21.687
関数名のつづり、カッコの閉じ忘れ、単位が必要な場所での単位の付け忘れがあると、

75
00:06:21.687 --> 00:06:25.516
宣言全体が無効になってしまいます。

76
00:06:25.516 --> 00:06:27.977
次に、開発者ツールで順番に調べます。

77
00:06:27.977 --> 00:06:34.267
ネットワークでスタイルシートが読み込めているか、エレメンツでクラスとセレクターが一致しているか、

78
00:06:34.267 --> 00:06:40.557
スタイルズで宣言が打ち消されていないか、そしてコンピューテッドで最終的な値を確認します。

79
00:06:40.557 --> 00:06:50.128
あわせて、大きな画像への強いぼかしで表示が重くなっていないか、三百二十ピクセル程度の狭い画面や文字拡大でも内容が使えるかも見ておきましょう。

80
00:06:50.128 --> 00:06:51.933
最後に互換性とまとめです。

81
00:06:51.933 --> 00:06:56.725
フィルターは、クローム五十三以降、エッジ十二以降、ファイアフォックス三十五以降、

82
00:06:56.725 --> 00:07:01.516
サファリ九・一以降と、主要ブラウザーで広く対応しています。

83
00:07:01.516 --> 00:07:04.988
今回比べたノーン自体は、さらに古い版から使えます。

84
00:07:04.988 --> 00:07:05.821
まとめます。

85
00:07:05.821 --> 00:07:10.821
このプロパティは、色、明るさ、ぼかしなどを関数で指定して、レイアウトを変えずに見た目だけを加工するもので、

86
00:07:10.821 --> 00:07:15.821
初期値はノーン、継承はしませんでした。

87
00:07:15.821 --> 00:07:24.570
練習として、実例でグレースケール一とノーンの違いを言葉で説明し、次にブライトネスなどを一つだけ加えて変化を比べてみてください。

88
00:07:24.570 --> 00:07:25.820
お疲れさまでした。