WEBVTT

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

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

3
00:00:03.943 --> 00:00:07.065
今回のテーマは、カラー・スキームです。

4
00:00:07.065 --> 00:00:13.473
ダークモードに対応しようとして、背景を暗く、文字を明るく変えたのに、入力欄やボタン、

5
00:00:13.473 --> 00:00:19.881
スクロールバーだけが白いまま残ってしまった、という経験はないでしょうか。

6
00:00:19.881 --> 00:00:29.247
それらの部品はブラウザーが用意する標準の見た目で描かれていて、ページの配色を伝えない限り自動では切り替わりません。

7
00:00:29.247 --> 00:00:34.258
カラー・スキームは、その標準部品に対して、この要素は暗い配色で描いてよい、

8
00:00:34.258 --> 00:00:39.270
とブラウザーへ意図を伝えるためのプロパティです。

9
00:00:39.270 --> 00:00:44.692
基本の書き方から実例、間違えやすい点まで、順番に見ていきましょう。

10
00:00:44.692 --> 00:00:46.236
書き方を確認します。

11
00:00:46.236 --> 00:00:50.559
カラー・スキームは、対象の要素に値をひとつ書くだけです。

12
00:00:50.559 --> 00:00:55.962
たとえばクラス名デモを持つ要素へ、プロパティ名、コロン、値のダーク、セミコロンと書くと、

13
00:00:55.962 --> 00:01:01.366
その要素と内側の標準部品が暗い配色の候補になります。

14
00:01:01.366 --> 00:01:10.783
ページ全体に効かせたい場合は、ルート要素、つまりエイチティーエムエル要素を選ぶルートという書き方で指定するのが一般的です。

15
00:01:10.783 --> 00:01:14.489
逆に、ページの一部分だけ暗いパネルにしたいときは、そのパネルにだけ書く、

16
00:01:14.489 --> 00:01:18.194
という使い方もできます。

17
00:01:18.194 --> 00:01:22.671
プロパティ名の後ろにコロンを置き、値の最後にセミコロンを付ける、という宣言の基本の形は、

18
00:01:22.671 --> 00:01:27.148
ほかのプロパティと同じです。

19
00:01:27.148 --> 00:01:32.552
まずはこの一行を、自分のページのルートへ書くところから始めてください。

20
00:01:32.552 --> 00:01:34.633
指定できる値の読み方です。

21
00:01:34.633 --> 00:01:39.275
ノーマルは初期値で、特別な意図を伝えない、という意味です。

22
00:01:39.275 --> 00:01:44.557
ライトは明るい配色、ダークは暗い配色に対応していることを伝えます。

23
00:01:44.557 --> 00:01:50.480
ポイントは、ライト・ダークのように空白で区切って複数を並べられることです。

24
00:01:50.480 --> 00:01:55.922
これは、この要素は明暗どちらの配色でも描ける、という宣言になります。

25
00:01:55.922 --> 00:02:01.204
ブラウザーは、その中から利用者の端末設定に合う方を選んで描きます。

26
00:02:01.204 --> 00:02:09.368
ひとつだけ書くと、その配色だけが候補になるため、端末が逆のモードでも部品は指定した側の色で描かれます。

27
00:02:09.368 --> 00:02:13.930
まずは、ページ全体にはライト・ダークの両方を書き、特定のパネルだけ単独の値を書く、

28
00:02:13.930 --> 00:02:18.492
という組み立てを覚えてください。

29
00:02:18.492 --> 00:02:20.916
初期値と継承を確認します。

30
00:02:20.916 --> 00:02:24.087
初期値はノーマルで、継承はします。

31
00:02:24.087 --> 00:02:31.546
継承する、というのは、親の要素に書けば内側の要素へ自動で伝わる、という性質です。

32
00:02:31.546 --> 00:02:39.379
ページ全体に効かせるときにルートへの指定が便利なのは、この継承のおかげでもあります。

33
00:02:39.379 --> 00:02:41.430
汎用的な値も書けます。

34
00:02:41.430 --> 00:02:53.552
親の計算値を使うインヘリット、仕様の初期値に戻すイニシャル、アンセットは継承するプロパティなのでインヘリットと同じ扱いになります。

35
00:02:53.552 --> 00:02:59.333
ふだんはライト、ダーク、あるいはその両方を直接書けば十分です。

36
00:02:59.333 --> 00:03:06.979
なお、継承するといっても、内側の要素に別の値が書いてあれば、そちらが優先されます。

37
00:03:06.979 --> 00:03:12.760
部分だけ逆の配色にしたいときは、この上書きの仕組みを使います。

38
00:03:12.760 --> 00:03:15.222
ここが一番間違えやすい点です。

39
00:03:15.222 --> 00:03:23.594
カラー・スキームをダークにしても、自分で指定した本文の色や背景色が、自動で反転するわけではありません。

40
00:03:23.594 --> 00:03:27.370
効くのは、ブラウザーが描く標準部品の配色です。

41
00:03:27.370 --> 00:03:32.131
具体的には、入力欄やチェックボックスのようなフォーム部品、スクロールバー、

42
00:03:32.131 --> 00:03:36.891
文字を選択したときの下地などに影響します。

43
00:03:36.891 --> 00:03:42.144
つまり、ページの暗い背景は自分でシーエスエスに書き、そのうえで部品の明暗をカラー・スキームで合わせる、

44
00:03:42.144 --> 00:03:47.397
という二段構えが必要です。

45
00:03:47.397 --> 00:03:54.620
指定しても本文の見た目が変わらない、と感じたら、それは故障ではなく仕様どおりの動きです。

46
00:03:54.620 --> 00:03:56.026
実例を見ていきます。

47
00:03:56.026 --> 00:03:58.558
まずエイチティーエムエルの用意です。

48
00:03:58.558 --> 00:04:02.073
ステージという箱の中に、デモというクラスを持つ要素を置き、その中にラベルと入力欄、

49
00:04:02.073 --> 00:04:05.589
ボタンを並べます。

50
00:04:05.589 --> 00:04:09.246
入力欄には、練習用の文字をあらかじめ入れておきます。

51
00:04:09.246 --> 00:04:14.308
準備として、頭の部分にはスタイルシートを読み込むリンクを置いてください。

52
00:04:14.308 --> 00:04:17.683
この入力欄とボタンが、ブラウザーの標準部品です。

53
00:04:17.683 --> 00:04:24.152
ラベルには入力欄と結びつけるためのフォー属性、入力欄には同じ値のアイディーを付けておきます。

54
00:04:24.152 --> 00:04:28.512
次のシーエスエスで、この部品の明暗がどう変わるかを確認します。

55
00:04:28.512 --> 00:04:33.911
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

56
00:04:33.911 --> 00:04:39.309
まずステージとデモに、余白や枠線などの土台の見た目を整えます。

57
00:04:39.309 --> 00:04:48.017
ここで注目してほしいのが、デモの背景と文字色に使っているキャンバスとキャンバステキストという値です。

58
00:04:48.017 --> 00:04:55.331
これらはブラウザーが持つシステムカラーで、配色の明暗に合わせて自動で切り替わります。

59
00:04:55.331 --> 00:05:01.600
そのうえで、今回の主役であるカラー・スキーム、ダークをデモへ追加します。

60
00:05:01.600 --> 00:05:08.044
すると入力欄やボタンといった標準部品が、暗い配色で描かれるようになります。

61
00:05:08.044 --> 00:05:10.477
値を変えて比べてみましょう。

62
00:05:10.477 --> 00:05:16.213
最後のカラー・スキームの値だけを、ダークからライトに置き換えます。

63
00:05:16.213 --> 00:05:25.251
すると、背景や文字に使ったシステムカラーも明るい側へ切り替わり、入力欄やボタンも明るい配色で描かれます。

64
00:05:25.251 --> 00:05:30.117
比較のコツは、変えるのはこの値ひとつだけにすることです。

65
00:05:30.117 --> 00:05:38.981
保存して再読み込みし、どの部品の色が変わったか、逆に何が変わらなかったかを言葉で整理してみてください。

66
00:05:38.981 --> 00:05:46.976
とくに入力欄の内側の色と、ボタンの面の色に注目すると、標準部品への効き方がはっきり見えます。

67
00:05:46.976 --> 00:05:51.192
システムカラーとの組み合わせを、もう少し掘り下げます。

68
00:05:51.192 --> 00:05:56.892
キャンバスは背景向け、キャンバステキストは文字向けのシステムカラーで、カラー・スキームで伝えた明暗に応じて、

69
00:05:56.892 --> 00:06:02.591
ブラウザーが適切な色を選んでくれます。

70
00:06:02.591 --> 00:06:06.807
自分で決めた色をベタ書きすると、この連動は起きません。

71
00:06:06.807 --> 00:06:14.927
ダークモード対応では、背景や文字にシステムカラーや変数を使い、どちらの配色で描くかの判断を、

72
00:06:14.927 --> 00:06:23.047
カラー・スキームと、利用者の設定を判定するメディアクエリ、プリファーズ・カラー・スキームに任せる組み立てが定番です。

73
00:06:23.047 --> 00:06:28.044
部品と地の色を同じ仕組みで動かすのが、破綻しない対応のコツです。

74
00:06:28.044 --> 00:06:30.331
効かないときの確認手順です。

75
00:06:30.331 --> 00:06:34.578
まず前提として、本文や背景が変わらないのは仕様です。

76
00:06:34.578 --> 00:06:39.315
確認すべきは、標準部品の色が切り替わっているかどうかです。

77
00:06:39.315 --> 00:06:49.933
開発者ツールを開き、ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを見ます。

78
00:06:49.933 --> 00:06:55.487
スタイルズで宣言が打ち消し線になっていれば、別の宣言に負けています。

79
00:06:55.487 --> 00:07:00.551
コンピューテッドでカラー・スキームの最終的な値も確認できます。

80
00:07:00.551 --> 00:07:08.882
それでも部品が変わって見えないときは、部品自体に背景色などを自分で指定していないかも見直してください。

81
00:07:08.882 --> 00:07:13.456
自前の指定があると、標準の配色よりそちらが優先されます。

82
00:07:13.456 --> 00:07:15.379
最後に互換性とまとめです。

83
00:07:15.379 --> 00:07:21.593
ブラウザーの対応は、クロームとエッジがエイティワン以降、ファイアフォックスがナインティシックス以降、

84
00:07:21.593 --> 00:07:27.806
サファリがサーティーン以降で、現在の主要ブラウザーでは広く使えます。

85
00:07:27.806 --> 00:07:35.943
練習としては、まずダークとライトの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

86
00:07:35.943 --> 00:07:36.830
まとめます。

87
00:07:36.830 --> 00:07:42.008
カラー・スキームは、標準部品の明暗の意図をブラウザーへ伝える指定です。

88
00:07:42.008 --> 00:07:48.370
ページの色そのものは自分のシーエスエスで整え、部品の配色はカラー・スキームで合わせる。

89
00:07:48.370 --> 00:07:51.033
この役割分担を覚えておいてください。

90
00:07:51.033 --> 00:07:52.364
お疲れさまでした。