WEBVTT

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

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

3
00:00:03.505 --> 00:00:05.549
今回のテーマは、カラーです。

4
00:00:05.549 --> 00:00:09.638
これは、文字の色を決める、とても基本的なプロパティです。

5
00:00:09.638 --> 00:00:15.334
背景の色を変える背景色とは役割が違い、カラーが変えるのは文字そのものの色です。

6
00:00:15.334 --> 00:00:20.299
同じ文章でも、文字の色が変われば印象も読みやすさも大きく変わります。

7
00:00:20.299 --> 00:00:25.337
今回は、深い緑と茶色という二つの例を比べながら、基本の書き方から色の指定方法、

8
00:00:25.337 --> 00:00:30.375
効かないときの確認まで、初心者向けに分かりやすく解説します。

9
00:00:30.375 --> 00:00:34.464
シーエスエスの色の入り口として、しっかり押さえましょう。

10
00:00:34.464 --> 00:00:41.182
文字の色は、見出しと本文で分けて考えることも多く、サイト全体の統一感を作る土台にもなります。

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

12
00:00:42.857 --> 00:00:48.949
カラーと書いてコロンを置き、その後ろに色の値を書き、最後にセミコロンを付けます。

13
00:00:48.949 --> 00:00:53.670
スライドの例では、デモというクラスを持つ要素の文字を、シャープ、二八五シー、

14
00:00:53.670 --> 00:00:58.391
四ゼロという十六進数で表した深い緑にしています。

15
00:00:58.391 --> 00:01:03.036
ドットで始まるクラス名や、コロンとセミコロンの書き忘れがあると効かなくなるので、

16
00:01:03.036 --> 00:01:07.680
まずはこの三行をそのまま書いてみましょう。

17
00:01:07.680 --> 00:01:14.077
そしてブラウザーで、ハローシーエスエスという文章の色がどう変わるか確かめてください。

18
00:01:14.077 --> 00:01:16.970
この形が、すべての色指定の出発点です。

19
00:01:16.970 --> 00:01:19.490
指定できる値の読み方を確認します。

20
00:01:19.490 --> 00:01:22.307
色の表し方にはいくつか種類があります。

21
00:01:22.307 --> 00:01:26.607
レッドやグリーンといった色の名前、シャープで始まる十六進数、アールジービー関数、

22
00:01:26.607 --> 00:01:30.906
エイチエスエル関数などが代表的です。

23
00:01:30.906 --> 00:01:38.023
さらに、今の文字色そのものを指すカレントカラーというキーワードや、透明度を持つ色も指定できます。

24
00:01:38.023 --> 00:01:42.767
どれを使っても、最終的にはブラウザーが一つの色として解釈します。

25
00:01:42.767 --> 00:01:47.215
最初は十六進数に慣れるのがおすすめですが、場面によって書き方を使い分けられるようになると、

26
00:01:47.215 --> 00:01:51.663
色の調整がぐっと楽になります。

27
00:01:51.663 --> 00:01:58.038
迷ったときは、まず色名か十六進数から始めて、慣れてきたら関数にも挑戦してみてください。

28
00:01:58.038 --> 00:02:00.835
色の書き方をもう少し比べます。

29
00:02:00.835 --> 00:02:08.478
十六進数は、赤と緑と青の量を二桁ずつ並べたもので、デザインの資料でよく使われます。

30
00:02:08.478 --> 00:02:17.800
アールジービー関数は、その三つの量を十進数の数値でそのまま書く方法で、透明度を加えることもできます。

31
00:02:17.800 --> 00:02:23.859
エイチエスエル関数は、色合いと鮮やかさと明るさで色を捉える方法で、少し明るくしたい、

32
00:02:23.859 --> 00:02:29.919
少し淡くしたいといった調整が直感的に行えます。

33
00:02:29.919 --> 00:02:38.495
どの書き方でも色そのものは同じように扱われるので、自分が調整しやすい方法を選んで大丈夫です。

34
00:02:38.495 --> 00:02:42.223
まずは一つの書き方を使いこなしましょう。

35
00:02:42.223 --> 00:02:50.986
透明度を扱うときは、背景と重なったときの見え方まで含めて、実際の画面で確かめることが大切です。

36
00:02:50.986 --> 00:02:52.789
初期値と継承を確認します。

37
00:02:52.789 --> 00:02:57.644
仕様上の初期値はキャンバステキストで、要素の標準の文字色を表す値です。

38
00:02:57.644 --> 00:03:04.719
ただし、ブラウザーの既定スタイルや別のクラスが付いていれば、画面ではそちらが優先されることもあります。

39
00:03:04.719 --> 00:03:07.909
そして、このプロパティは親から子へ継承します。

40
00:03:07.909 --> 00:03:14.013
たとえばボディ要素に文字色を書けば、その中にある見出しや段落にも同じ色が引き継がれます。

41
00:03:14.013 --> 00:03:21.503
そのため、ページ全体の文字色は広い範囲に一度だけ書き、強調したい場所だけ個別に上書きする使い方が効率的です。

42
00:03:21.503 --> 00:03:25.526
インヘリットやイニシャルといった共通キーワードも使えます。

43
00:03:25.526 --> 00:03:27.372
ここからは記事の実例です。

44
00:03:27.372 --> 00:03:34.615
エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。

45
00:03:34.615 --> 00:03:40.438
デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。

46
00:03:40.438 --> 00:03:44.556
頭の部分では、スタイルシートをリンクで読み込んでください。

47
00:03:44.556 --> 00:03:49.101
この土台は変えずに固定し、次で変える一行の効果だけを観察します。

48
00:03:49.101 --> 00:03:51.657
まずは土台をそのまま用意しましょう。

49
00:03:51.657 --> 00:03:57.906
背景や余白は土台として固定されているので、文字色の変化だけに集中して見ることができます。

50
00:03:57.906 --> 00:03:59.796
土台のシーエスエスです。

51
00:03:59.796 --> 00:04:05.939
ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。

52
00:04:05.939 --> 00:04:09.089
最後の行でカラーに、深い緑を指定します。

53
00:04:09.089 --> 00:04:14.287
この緑は、枠線の色ともそろえられていて、落ち着いた印象になります。

54
00:04:14.287 --> 00:04:20.745
ファイルを保存してブラウザーを再読み込みし、まずは文章の色をよく観察してください。

55
00:04:20.745 --> 00:04:25.785
背景や余白は変えていないので、違いはこの一行だけが生むものです。

56
00:04:25.785 --> 00:04:32.558
文字色と背景色の組み合わせで、読みやすさがどう感じるかも合わせて確かめておきましょう。

57
00:04:32.558 --> 00:04:39.646
この段階では、色の名前を覚えるよりも、値と見た目の対応を体で覚えることを意識してください。

58
00:04:39.646 --> 00:04:46.130
次に最後の行だけを、シャープ、九ビー、四五一ディーという茶色へ置き換えます。

59
00:04:46.130 --> 00:04:54.150
すると文章の色が深い緑から茶色へ変わり、同じ文章でも温かみのある、まったく違う印象になります。

60
00:04:54.150 --> 00:05:01.145
変更したのは文字色だけなのに、ページ全体の雰囲気が変わって見えるのが、色の力です。

61
00:05:01.145 --> 00:05:08.994
変更後はファイルを保存してブラウザーを再読み込みし、違いを自分の言葉で説明してみてください。

62
00:05:08.994 --> 00:05:16.502
二つの表示を並べて比べると、背景とのコントラストや、読みやすさの差もはっきり分かります。

63
00:05:16.502 --> 00:05:20.605
間違えやすい点と、効かないときの確認方法です。

64
00:05:20.605 --> 00:05:28.098
このプロパティで大切なのは、背景と文字の組み合わせで読みやすさが大きく変わる点です。

65
00:05:28.098 --> 00:05:33.271
薄い背景に薄い文字色では、内容が読めなくなってしまいます。

66
00:05:33.271 --> 00:05:40.942
また、リンクやエラーの区別を色だけに頼ると、色の違いが分かりにくい人には伝わりません。

67
00:05:40.942 --> 00:05:44.867
下線や説明文も一緒に添える工夫をしましょう。

68
00:05:44.867 --> 00:05:51.468
色が効かないと感じたら、開発者ツールでネットワーク、要素、スタイルズ、コンピューテッドの順に確認し、

69
00:05:51.468 --> 00:05:58.069
セレクターの一致や上書きがないかを調べましょう。

70
00:05:58.069 --> 00:06:02.439
三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも読めるかどうかも、

71
00:06:02.439 --> 00:06:06.810
合わせて確認しましょう。

72
00:06:06.810 --> 00:06:09.091
ブラウザー互換性を確認します。

73
00:06:09.091 --> 00:06:14.946
記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、

74
00:06:14.946 --> 00:06:20.801
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

75
00:06:20.801 --> 00:06:26.123
アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。

76
00:06:26.123 --> 00:06:32.358
とても歴史の長いプロパティなので、今回使った基本の書き方は安心して使えるでしょう。

77
00:06:32.358 --> 00:06:38.897
ただし、プロパティが使えることと、すべての色の書き方や新しい関数が使えることは別です。

78
00:06:38.897 --> 00:06:44.220
新しい書き方を使うときは、対象の値まで含めて対応状況を確認しましょう。

79
00:06:44.220 --> 00:06:46.090
最後に練習とまとめです。

80
00:06:46.090 --> 00:06:47.025
まとめます。

81
00:06:47.025 --> 00:06:54.193
カラーは文字の色を決めるプロパティで、色名や十六進数、関数など複数の書き方で指定できました。

82
00:06:54.193 --> 00:06:58.400
初期値はキャンバステキストで、親から子へ継承しました。

83
00:06:58.400 --> 00:07:03.386
背景とのコントラストを確認し、色だけに頼らない工夫も大切でした。

84
00:07:03.386 --> 00:07:11.645
練習として、まず深い緑と茶色の違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

85
00:07:11.645 --> 00:07:13.047
お疲れさまでした。

86
00:07:13.047 --> 00:07:16.631
これでシーエスエスのプロパティ編は最終回です。

87
00:07:16.631 --> 00:07:25.045
関連する背景色やフォントまわりのプロパティも合わせて振り返ると、文字と色の整え方がより確かなものになります。

88
00:07:25.045 --> 00:07:32.992
自分のページでも、本文はそのままに文字色だけを切り替えて、印象と読みやすさの変化を確かめてみましょう。