WEBVTT

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

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

3
00:00:03.637 --> 00:00:06.062
今回のテーマは、オパシティです。

4
00:00:06.062 --> 00:00:10.759
不透明度、つまりどれくらい透けさせるかを決めるプロパティです。

5
00:00:10.759 --> 00:00:18.185
薄いフィルムを一枚かぶせたように、要素全体が透けて、後ろにある内容がうっすら見えるようになります。

6
00:00:18.185 --> 00:00:21.973
大切なのは、薄くなるのが背景だけではないことです。

7
00:00:21.973 --> 00:00:26.368
枠線も、中の文字も、画像も、箱全体がまとめて薄くなります。

8
00:00:26.368 --> 00:00:31.520
この動画では、ゼロてんごと、いちを比べながら、値の読み方や、背景だけを薄くする方法との違い、

9
00:00:31.520 --> 00:00:36.673
効かないときの確認まで、順番に見ていきます。

10
00:00:36.673 --> 00:00:43.492
写真やカード、ボタンなど、身の回りの多くの場所で使われている、とても身近なプロパティです。

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

12
00:00:45.155 --> 00:00:49.992
スライドのように、対象のクラスにオパシティと数値を書くだけです。

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

14
00:00:56.038 --> 00:01:01.328
クラスの名前は、エイチティーエムエルのクラス属性と一致させてください。

15
00:01:01.328 --> 00:01:03.444
仕様上の初期値は、いちです。

16
00:01:03.444 --> 00:01:07.525
これはまったく透けていない、通常の表示という意味です。

17
00:01:07.525 --> 00:01:09.793
通常は親から子へ継承しません。

18
00:01:09.793 --> 00:01:14.025
ただし継承しないことと、見た目に影響がないことは別です。

19
00:01:14.025 --> 00:01:18.862
親に指定すると、子も含めた全体がひとまとまりとして薄く見えます。

20
00:01:18.862 --> 00:01:22.036
その点は後のセクションで改めて確認します。

21
00:01:22.036 --> 00:01:23.904
値の読み方を整理します。

22
00:01:23.904 --> 00:01:28.262
指定できるのは、ゼロからいちまでの数値、または割合です。

23
00:01:28.262 --> 00:01:32.154
いちは不透明で、通常どおりくっきり見える状態です。

24
00:01:32.154 --> 00:01:37.601
ゼロてんごは半分だけ透けた状態で、要素と後ろの内容が重なって見えます。

25
00:01:37.601 --> 00:01:41.026
ゼロは完全な透明で、目には見えなくなります。

26
00:01:41.026 --> 00:01:48.497
割合で書くこともできて、ごじゅっぱーせんとはゼロてんごと、ひゃくぱーせんとはいちと同じ意味です。

27
00:01:48.497 --> 00:01:52.856
範囲を超えた数値を書くと、端の値に丸められて扱われます。

28
00:01:52.856 --> 00:02:00.950
迷ったら、まずゼロてんごを基準にして、そこから少しずつ数値を動かすと、変化の加減がつかみやすくなります。

29
00:02:00.950 --> 00:02:08.888
慣れてきたら、ゼロてん二五や、ゼロてん七五のような細かい値も試して、好みの透け具合を探してみましょう。

30
00:02:08.888 --> 00:02:13.632
オパシティで初心者がつまずきやすいのが、子要素への影響です。

31
00:02:13.632 --> 00:02:18.138
親の要素にゼロてんごを指定すると、その中にある文字や画像などの子要素も、

32
00:02:18.138 --> 00:02:22.645
すべて一緒に半分だけ透けた状態になります。

33
00:02:22.645 --> 00:02:28.654
しかも、子要素側でいちを指定し直しても、親より濃く表示することはできません。

34
00:02:28.654 --> 00:02:34.821
親と子は一つのグループとしてまとめて透ける、と考えるのが分かりやすいでしょう。

35
00:02:34.821 --> 00:02:40.672
前のセクションで触れた、継承はしない、という話との違いに注意してください。

36
00:02:40.672 --> 00:02:48.420
プロパティの値自体は引き継がれませんが、見た目の結果としては、グループ全体に透明度が掛かるのです。

37
00:02:48.420 --> 00:02:53.659
やりたいことが、背景だけを薄くすることなら、オパシティは向きません。

38
00:02:53.659 --> 00:02:59.669
オパシティでは文字まで一緒に薄くなって、文章が読みにくくなってしまうからです。

39
00:02:59.669 --> 00:03:03.522
そんなときは、背景色そのものに透明度を持たせます。

40
00:03:03.522 --> 00:03:09.994
アールジービーエーのように、色の指定にアルファ値、つまり透明度を一緒に書く方法です。

41
00:03:09.994 --> 00:03:15.541
こうすれば、半透明になるのは背景色だけで、文字や枠線は濃いまま保てます。

42
00:03:15.541 --> 00:03:18.931
要素全体を透けさせたいのか、背景だけなのか。

43
00:03:18.931 --> 00:03:25.866
目的をはっきりさせてから、二つの方法を使い分けるのが、このプロパティを使いこなすコツです。

44
00:03:25.866 --> 00:03:32.800
枠線だけを薄くしたい場合も考え方は同じで、ボーダーカラーにアルファ値付きの色を指定します。

45
00:03:32.800 --> 00:03:34.307
ここからは実例です。

46
00:03:34.307 --> 00:03:40.184
エイチティーエムエルでは、ステージという親の中に、デモという箱を一つ置きます。

47
00:03:40.184 --> 00:03:43.951
中には、折り返しが確認できる程度の文章を入れます。

48
00:03:43.951 --> 00:03:50.882
シーエスエスでは、デモに内側の余白と、濃い緑色の太い枠線、薄い黄緑色の背景を付けておきます。

49
00:03:50.882 --> 00:03:58.869
この土台の状態では、オパシティはまだ指定していないので、初期値のいち、つまりまったく透けていない表示です。

50
00:03:58.869 --> 00:04:03.013
土台はそのままにして、最後に加えるオパシティの一行だけを切り替えて、ゼロてんごと、

51
00:04:03.013 --> 00:04:07.156
いちの違いを比べていきます。

52
00:04:07.156 --> 00:04:10.848
ブラウザーで開いたときに、土台の色とデモの箱の境目がはっきり見える状態が、

53
00:04:10.848 --> 00:04:14.540
比較の出発点になります。

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

55
00:04:18.105 --> 00:04:21.671
デモに、オパシティ、ゼロてんごを指定します。

56
00:04:21.671 --> 00:04:27.262
すると、薄い黄緑だった背景も、濃い緑だった枠線も、中の文字も、すべて半分だけ透けて、

57
00:04:27.262 --> 00:04:32.853
後ろの土台の色がうっすら重なって見えるようになります。

58
00:04:32.853 --> 00:04:36.743
一方で、箱の大きさ、余白、枠線の太さ、文章の折り返しといったレイアウトは、

59
00:04:36.743 --> 00:04:40.633
まったく変わりません。

60
00:04:40.633 --> 00:04:45.008
オパシティは配置には手を付けず、見た目の透け具合だけを変える仕組みだということが、

61
00:04:45.008 --> 00:04:49.384
この一例でよく分かります。

62
00:04:49.384 --> 00:04:53.760
重なりの表現や、ホバー時の演出の土台にもなる指定です。

63
00:04:53.760 --> 00:04:57.926
では、最後の一行の値だけを、いちに変えてみましょう。

64
00:04:57.926 --> 00:05:00.008
他の指定はすべて同じです。

65
00:05:00.008 --> 00:05:07.699
今度は透け具合がなくなり、背景の黄緑も、枠線の緑も、文字も、元のくっきりした状態にすぐ戻ります。

66
00:05:07.699 --> 00:05:13.306
いちは初期値でもあり、不透明に戻すための値として覚えておくと便利です。

67
00:05:13.306 --> 00:05:20.196
たとえば、普段は少し薄く見せておき、マウスを乗せたときだけ、いちにしてはっきり見せる。

68
00:05:20.196 --> 00:05:25.002
そんな切り替え表現が、この一行の書き換えだけで実現できます。

69
00:05:25.002 --> 00:05:26.604
ゼロてんごと、いち。

70
00:05:26.604 --> 00:05:30.930
この二つを往復できれば、基本操作は押さえたと言えます。

71
00:05:30.930 --> 00:05:32.517
使いどころと注意点です。

72
00:05:32.517 --> 00:05:36.485
オパシティは、画像やカードを少し控えめに見せたり、ホバーでくっきりさせたり、

73
00:05:36.485 --> 00:05:40.452
背景の上に文字を重ねる演出でよく使われます。

74
00:05:40.452 --> 00:05:44.552
トランジションと組み合わせれば、ふわりと現れる動きも作れます。

75
00:05:44.552 --> 00:05:46.932
注意したいのは、まず読みやすさです。

76
00:05:46.932 --> 00:05:51.429
薄くしすぎると文字のコントラストが下がり、内容が読みにくくなります。

77
00:05:51.429 --> 00:05:57.116
もう一つ、ゼロにしても要素の場所は残り、クリックなどの操作を受け付ける場合があります。

78
00:05:57.116 --> 00:06:00.687
完全に操作できないように隠したいときは、ビジビリティやディスプレイなど、

79
00:06:00.687 --> 00:06:04.257
目的に合う別の方法を選んでください。

80
00:06:04.257 --> 00:06:10.870
アニメーションで使う場合は、変化が速すぎると読み取りにくいので、短すぎない時間を付けるのもコツです。

81
00:06:10.870 --> 00:06:13.303
効かないと感じたときの確認です。

82
00:06:13.303 --> 00:06:20.451
まず、スタイルシートが読み込めているか、セレクターとクラスの名前が一致しているかを確かめます。

83
00:06:20.451 --> 00:06:25.926
次に開発者ツールを開き、スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかを見て、

84
00:06:25.926 --> 00:06:31.401
コンピューテッドで最終的な値を確認します。

85
00:06:31.401 --> 00:06:34.138
見落としやすいのが親要素の影響です。

86
00:06:34.138 --> 00:06:40.374
親にすでに小さい値が掛かっていると、子側でいちにしても、それ以上濃くはなりません。

87
00:06:40.374 --> 00:06:46.609
また、背景だけを変えたいのに文字まで薄くなる場合は、指定する場所が違うサインです。

88
00:06:46.609 --> 00:06:48.890
順番に切り分けて調べましょう。

89
00:06:48.890 --> 00:06:50.808
最後に互換性とまとめです。

90
00:06:50.808 --> 00:06:56.931
オパシティは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、

91
00:06:56.931 --> 00:07:03.054
サファリに以降と、非常に古いブラウザーから対応している、安心して使えるプロパティです。

92
00:07:03.054 --> 00:07:03.939
まとめます。

93
00:07:03.939 --> 00:07:08.661
オパシティは、ゼロからいちまでの数値で、背景も文字も含めた要素全体の不透明度を決めるもので、

94
00:07:08.661 --> 00:07:13.382
初期値はいち、継承はしませんでした。

95
00:07:13.382 --> 00:07:17.808
背景だけを薄くしたいときは、色のアルファ値を使うのでしたね。

96
00:07:17.808 --> 00:07:25.776
練習として、実例でゼロてんごと、いちの違いを言葉で説明し、次にゼロてん二五など別の値でも比べてみてください。

97
00:07:25.776 --> 00:07:27.104
お疲れさまでした。

98
00:07:27.104 --> 00:07:34.038
一つの値だけでなく、親子関係と背景だけの方法まで言えるようになれば、このプロパティは卒業です。