WEBVTT

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

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

3
00:00:03.434 --> 00:00:06.295
今回のテーマは、アクセント・カラーです。

4
00:00:06.295 --> 00:00:11.947
フォームを作っていると、チェックボックスのチェックの色や、ラジオボタンの丸の色が、

5
00:00:11.947 --> 00:00:17.599
ブラウザー標準の青色のままで、サイトの配色と合わないと感じることがあります。

6
00:00:17.599 --> 00:00:23.894
これらの部品はブラウザーが描くため、ふつうの文字色や背景色の指定では色を変えられません。

7
00:00:23.894 --> 00:00:31.620
アクセント・カラーは、そうした標準部品のアクセント色、つまり選択状態を表す色を指定するためのプロパティです。

8
00:00:31.620 --> 00:00:36.628
基本の書き方から実例、効かないときの確認まで、順番に見ていきましょう。

9
00:00:36.628 --> 00:00:38.118
書き方を確認します。

10
00:00:38.118 --> 00:00:42.439
アクセント・カラーは、対象の要素に値をひとつ書くだけです。

11
00:00:42.439 --> 00:00:46.090
たとえばクラス名デモを持つ要素へ、プロパティ名、コロン、値として色のコード、

12
00:00:46.090 --> 00:00:49.741
セミコロンと書きます。

13
00:00:49.741 --> 00:00:56.744
この例では、シャープ・キュービー・ヨン・ゴー・イチ・ディーという、茶色系の色を指定しています。

14
00:00:56.744 --> 00:01:00.916
宣言の形そのものは、ほかの色指定のプロパティと同じです。

15
00:01:00.916 --> 00:01:05.908
効かせたい部品そのものに書くのが基本ですが、継承する性質があるため、フォーム全体を包む親要素に書いて、

16
00:01:05.908 --> 00:01:10.900
まとめて効かせることもできます。

17
00:01:10.900 --> 00:01:17.456
まずはチェックボックスひとつに書いて、色が変わることを確かめるところから始めてください。

18
00:01:17.456 --> 00:01:19.228
指定できる値の読み方です。

19
00:01:19.228 --> 00:01:21.137
値は大きく分けて二種類です。

20
00:01:21.137 --> 00:01:26.454
ひとつはオートで、ブラウザーが決める標準のアクセント色を使う、という意味です。

21
00:01:26.454 --> 00:01:32.043
もうひとつは色そのもので、チェックが入ったときの地の色などに、その色が使われます。

22
00:01:32.043 --> 00:01:39.268
色の書き方はいつも通りで、十六進数のコードのほか、カラーネームやアールジービーなどの関数でも指定できます。

23
00:01:39.268 --> 00:01:44.449
ポイントは、指定するのはあくまでアクセントになる一色だけだ、ということです。

24
00:01:44.449 --> 00:01:50.584
チェックマーク自体の形や、部品の枠線、文字の色までを個別に決めるプロパティではありません。

25
00:01:50.584 --> 00:01:55.764
一色を渡すと、ブラウザーがその部品に合う形で使ってくれる、と覚えてください。

26
00:01:55.764 --> 00:01:57.885
初期値と継承を確認します。

27
00:01:57.885 --> 00:02:00.496
初期値はオートで、継承はします。

28
00:02:00.496 --> 00:02:06.697
オートの間は、ブラウザーやオーエスが用意した標準のアクセント色で描かれます。

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

30
00:02:12.571 --> 00:02:18.935
そのため、フォーム全体に同じ色を効かせたいときは、親に一回書くだけで済みます。

31
00:02:18.935 --> 00:02:20.730
汎用的な値も書けます。

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

33
00:02:30.848 --> 00:02:35.417
ただし、部品側に別の指定があれば、そちらが優先されます。

34
00:02:35.417 --> 00:02:40.312
部分ごとに色を変えたいときは、この上書きの仕組みを使います。

35
00:02:40.312 --> 00:02:41.988
効く範囲を確認します。

36
00:02:41.988 --> 00:02:46.710
対象になるのは、ブラウザーが描くネイティブなフォーム部品です。

37
00:02:46.710 --> 00:02:51.052
代表例は、チェックボックス、ラジオボタン、レンジ入力、いわゆるスライダー、

38
00:02:51.052 --> 00:02:55.393
そしてプログレスバーの進捗部分などです。

39
00:02:55.393 --> 00:02:57.374
一方で、注意点もあります。

40
00:02:57.374 --> 00:03:02.248
すべての部品の、すべての状態の色を指定できるわけではありません。

41
00:03:02.248 --> 00:03:07.047
たとえば、チェックが入っていないときの枠の色や、ホバーしたときの色まで細かく決めることは、

42
00:03:07.047 --> 00:03:11.846
このプロパティの役目ではありません。

43
00:03:11.846 --> 00:03:16.416
また、見え方はブラウザーやオーエスによって少しずつ違います。

44
00:03:16.416 --> 00:03:22.052
自分の環境だけで判断せず、複数のブラウザーで表示を確認することが大切です。

45
00:03:22.052 --> 00:03:23.409
実例を見ていきます。

46
00:03:23.409 --> 00:03:25.853
まずエイチティーエムエルの用意です。

47
00:03:25.853 --> 00:03:31.147
ステージという箱の中にラベルを置き、その中にチェックボックスと文章を入れます。

48
00:03:31.147 --> 00:03:40.242
チェックボックスには、クラス名デモと、タイプ属性のチェックボックス、そして最初からチェックが入った状態にするチェックド属性を付けます。

49
00:03:40.242 --> 00:03:44.450
頭の部分には、スタイルシートを読み込むリンクを置いてください。

50
00:03:44.450 --> 00:03:50.016
ラベルで部品と文章を包んでおくと、文章をクリックしてもチェックを切り替えられます。

51
00:03:50.016 --> 00:03:54.360
次のシーエスエスで、このチェックの色がどう変わるかを確認します。

52
00:03:54.360 --> 00:03:59.909
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

53
00:03:59.909 --> 00:04:06.175
まずステージとデモに、余白や枠線、背景色などの土台の見た目を整えます。

54
00:04:06.175 --> 00:04:10.739
デモには幅と高さに一点五レムを指定して、チェックボックス自体を少し大きくし、

55
00:04:10.739 --> 00:04:15.304
変化を見やすくしています。

56
00:04:15.304 --> 00:04:21.390
そして最後に、今回の主役であるアクセント・カラーをデモへ追加します。

57
00:04:21.390 --> 00:04:27.476
色はシャープ・キュービー・ヨン・ゴー・イチ・ディー、茶色系の色です。

58
00:04:27.476 --> 00:04:34.816
これで、チェックが入ったときの地の色が、ブラウザー標準の青からこの色へ変わります。

59
00:04:34.816 --> 00:04:41.260
土台の指定は変えず、最後の一行だけが主役だ、という点に注目してください。

60
00:04:41.260 --> 00:04:43.376
値を変えて比べてみましょう。

61
00:04:43.376 --> 00:04:51.238
最後のアクセント・カラーの値だけを、シャープ・ニーハチ・ゴーロク・ヨンゼロという緑系の色に置き換えます。

62
00:04:51.238 --> 00:04:58.041
ファイルを保存してブラウザーを再読み込みすると、チェックの地の色が茶色から緑へ変わります。

63
00:04:58.041 --> 00:05:02.274
比較のコツは、変えるのはこの値ひとつだけにすることです。

64
00:05:02.274 --> 00:05:08.018
ほかの指定はそのままにして、色だけが結果にどう影響したかを確認してください。

65
00:05:08.018 --> 00:05:12.629
また、チェックを外した状態と入れた状態の両方を見比べると、どの部分にアクセント色が使われているのかが、

66
00:05:12.629 --> 00:05:17.240
はっきり分かります。

67
00:05:17.240 --> 00:05:20.381
応用として、まとめて指定する使い方です。

68
00:05:20.381 --> 00:05:25.406
アクセント・カラーは継承するので、フォーム要素やページのルートに書けば、

69
00:05:25.406 --> 00:05:30.431
内側のチェックボックスやラジオボタンへ一括で伝わります。

70
00:05:30.431 --> 00:05:34.357
サイト全体のテーマカラーをひとつ決めておけば、部品ごとに書く手間がなくなり、

71
00:05:34.357 --> 00:05:38.283
色のばらつきも防げます。

72
00:05:38.283 --> 00:05:41.110
ただし、選ぶ色には注意してください。

73
00:05:41.110 --> 00:05:49.119
チェックの地の色が薄すぎると、チェックマークとのコントラストが足りず、選択状態が見分けにくくなります。

74
00:05:49.119 --> 00:05:54.145
白いチェックがはっきり見える、十分に濃い色を選ぶことが大切です。

75
00:05:54.145 --> 00:05:59.484
一部の部品だけ色を変えたい場合は、その部品に直接書いて上書きします。

76
00:05:59.484 --> 00:06:01.761
効かないときの確認手順です。

77
00:06:01.761 --> 00:06:06.803
まず、対象がブラウザーの標準部品かどうかを思い出してください。

78
00:06:06.803 --> 00:06:13.147
画像やシーエスエスだけで自作した見た目の部品には、このプロパティは効きません。

79
00:06:13.147 --> 00:06:18.596
次に開発者ツールを開き、ネットワークでスタイルシートが取得できているか、

80
00:06:18.596 --> 00:06:24.045
エレメンツで対象のクラスとセレクターが一致しているかを見ます。

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

82
00:06:29.575 --> 00:06:34.780
コンピューテッドでアクセント・カラーの最終的な値も確認できます。

83
00:06:34.780 --> 00:06:41.611
それでも変わって見えないときは、チェックが入った状態で見ているかも確認してください。

84
00:06:41.611 --> 00:06:45.352
アクセント色は主に、選択された状態に現れます。

85
00:06:45.352 --> 00:06:47.628
最後に互換性とまとめです。

86
00:06:47.628 --> 00:06:54.106
ブラウザーの対応は、クロームとエッジが九十三以降、ファイアフォックスが九十二以降、

87
00:06:54.106 --> 00:07:00.584
サファリが二十六・二以降で、現在の主要ブラウザーでは広く使えます。

88
00:07:00.584 --> 00:07:09.864
練習としては、まず茶色と緑色、二つの指定の違いを言葉で説明し、次に値だけを変えて結果を比べてみてください。

89
00:07:09.864 --> 00:07:10.914
まとめます。

90
00:07:10.914 --> 00:07:19.143
アクセント・カラーは、チェックボックスなどの標準部品の、選択状態の色を指定するプロパティです。

91
00:07:19.143 --> 00:07:21.770
初期値はオート、継承はします。

92
00:07:21.770 --> 00:07:28.948
一色を渡すだけで、ブラウザーが部品に合わせて使ってくれる、という手軽さが特徴です。

93
00:07:28.948 --> 00:07:30.524
お疲れさまでした。