WEBVTT

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

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

3
00:00:03.397 --> 00:00:06.511
今回のテーマは、バックグラウンドカラーです。

4
00:00:06.511 --> 00:00:10.898
これは、要素の背景に色を付ける、とても基本的なプロパティです。

5
00:00:10.898 --> 00:00:16.984
文字の色を変えるカラーとは役割が違い、こちらは文字の後ろ側、下地になる色を担当します。

6
00:00:16.984 --> 00:00:25.477
この動画では、基本の書き方から、色の指定方法、透明や半透明の扱い、そして効かないときの確認方法までを順番に見ていきます。

7
00:00:25.477 --> 00:00:29.652
特に、薄い緑と薄いオレンジという二つの色を比べることで、背景だけが変わり、

8
00:00:29.652 --> 00:00:33.827
文字はそのまま残る様子をはっきり確認します。

9
00:00:33.827 --> 00:00:39.772
背景色はサイトの印象を決める土台でもあるので、最初にしっかり身につけておきましょう。

10
00:00:39.772 --> 00:00:41.533
まず基本の書き方です。

11
00:00:41.533 --> 00:00:47.937
スライドのように、対象のクラスにバックグラウンドカラーと、色を表す値を書きます。

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

13
00:00:54.342 --> 00:00:59.625
クラス名は、エイチティーエムエルのクラス属性と一致させてください。

14
00:00:59.625 --> 00:01:01.386
大切なのは初期値です。

15
00:01:01.386 --> 00:01:07.630
何も指定しなければ値はトランスペアレント、つまり透明で、後ろが透けて見えます。

16
00:01:07.630 --> 00:01:14.835
通常は親から子へ継承しませんので、背景色が欲しい要素ごとに、自分で指定する必要があります。

17
00:01:14.835 --> 00:01:22.520
セミコロンを忘れると次の宣言まで影響することがあるので、書き終わったら見直す習慣を付けましょう。

18
00:01:22.520 --> 00:01:26.534
色の書き方には、いくつか種類があります。

19
00:01:26.534 --> 00:01:28.340
一つ目は色名です。

20
00:01:28.340 --> 00:01:35.364
トマトやスカイブルーのような、あらかじめ用意された名前で指定できます。

21
00:01:35.364 --> 00:01:37.571
二つ目は十六進数です。

22
00:01:37.571 --> 00:01:46.000
シャープの後ろに六桁の英数字を並べる書き方で、今回の薄い緑もこの形で書かれています。

23
00:01:46.000 --> 00:01:48.810
三つ目はアールジービーです。

24
00:01:48.810 --> 00:01:52.823
赤、緑、青の三色の量を数値で指定します。

25
00:01:52.823 --> 00:01:59.647
どの書き方を選んでも、最終的に表示される色が同じなら結果は同じです。

26
00:01:59.647 --> 00:02:06.269
細かく色を調整したいときほど、十六進数やアールジービーが便利です。

27
00:02:06.269 --> 00:02:15.300
迷ったときは、デザインで使っている色を十六進数で統一しておくと、後から探しやすくなります。

28
00:02:15.300 --> 00:02:18.107
透明に関する指定も押さえておきましょう。

29
00:02:18.107 --> 00:02:23.581
トランスペアレントは、完全に透明な背景を表すキーワードで、初期値でもあります。

30
00:02:23.581 --> 00:02:29.336
もう少し応用として、背景だけを半透明にしたい場合は、アルファ値付きの色を使います。

31
00:02:29.336 --> 00:02:35.933
たとえばアールジービーエーでは、四つ目の値で不透明度を調整でき、ゼロに近いほど透けて見えます。

32
00:02:35.933 --> 00:02:40.565
背景色の下に写真や別の色があるとき、この半透明がとても役立ちます。

33
00:02:40.565 --> 00:02:46.039
色そのものを薄く見せたいのか、透けさせたいのかで、書き方を使い分けてください。

34
00:02:46.039 --> 00:02:51.232
透明度を変えたら、必ず実際の背景の上で文字の読みやすさを確認してください。

35
00:02:51.232 --> 00:02:55.100
ここで間違えやすいのが、オパシティとの違いです。

36
00:02:55.100 --> 00:02:59.935
オパシティは要素全体の不透明度を変えるプロパティなので、背景だけでなく、

37
00:02:59.935 --> 00:03:04.770
中の文字や画像までまとめて薄くなってしまいます。

38
00:03:04.770 --> 00:03:11.378
読みやすさを保ちたい場面でこれを使うと、文字までぼんやりしてしまうことがあります。

39
00:03:11.378 --> 00:03:19.921
背景だけを薄くしたいなら、先ほど紹介したアルファ値付きの色でバックグラウンドカラーを指定するのが正解です。

40
00:03:19.921 --> 00:03:27.012
何を薄くしたいのか、背景だけか全体かを先に決めてから、プロパティを選ぶようにしましょう。

41
00:03:27.012 --> 00:03:32.492
この違いを覚えておくと、意図せず文字が読みにくくなる失敗を防げます。

42
00:03:32.492 --> 00:03:33.989
ここからは実例です。

43
00:03:33.989 --> 00:03:40.873
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。

44
00:03:40.873 --> 00:03:49.104
中には文章が入っていて、背景色の上で文字がどう見えるか、文章が折り返す様子も一緒に確認できるようにしています。

45
00:03:49.104 --> 00:03:54.343
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

46
00:03:54.343 --> 00:03:59.132
シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けます。

47
00:03:59.132 --> 00:04:03.098
この土台は変えずに、最後のバックグラウンドカラーの行だけを切り替えて比べていくのが、

48
00:04:03.098 --> 00:04:07.064
この実例の進め方です。

49
00:04:07.064 --> 00:04:13.200
親子関係を意識して書くことで、背景がどの範囲に付くのかがイメージしやすくなります。

50
00:04:13.200 --> 00:04:15.501
土台のシーエスエスの続きです。

51
00:04:15.501 --> 00:04:22.711
デモの箱には、内側の余白と、緑色の太い枠と、背景の下地になる薄い緑、そして文字色を指定します。

52
00:04:22.711 --> 00:04:29.000
この準備があることで、背景色が変わったときの違いが、はっきり見えるようになります。

53
00:04:29.000 --> 00:04:34.983
続く別のルールで、デモに対してバックグラウンドカラーに同じ薄い緑を指定します。

54
00:04:34.983 --> 00:04:39.355
同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されるので、

55
00:04:39.355 --> 00:04:43.727
この最後の行が比較の対象になります。

56
00:04:43.727 --> 00:04:48.483
土台と変更行を分けて書くことが、原因を追いやすくするコツです。

57
00:04:48.483 --> 00:04:54.772
特に文字色との組み合わせは、背景を変えるたびにコントラストを確認するのが大切です。

58
00:04:54.772 --> 00:04:55.946
では比較です。

59
00:04:55.946 --> 00:05:01.314
最初は薄い緑、シャープ、イーろく、エフに、シーイーを指定します。

60
00:05:01.314 --> 00:05:05.928
ファイルを保存してブラウザーを再読み込みすると、箱の背景がやさしい緑色で表示され、

61
00:05:05.928 --> 00:05:10.541
文字は濃い緑のまま読めます。

62
00:05:10.541 --> 00:05:18.929
次に、最後の行の値だけを薄いオレンジ、シャープ、エフエー、イーご、ディーろくに置き換えてみましょう。

63
00:05:18.929 --> 00:05:21.110
他の指定はすべて同じです。

64
00:05:21.110 --> 00:05:27.317
今度は背景だけが温かみのある色に変わり、文字の色や余白、枠はそのままです。

65
00:05:27.317 --> 00:05:34.866
値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。

66
00:05:34.866 --> 00:05:41.408
色が変わるだけで、同じ文章でも受ける印象が大きく変わる点にも注目してください。

67
00:05:41.408 --> 00:05:46.846
色以外の共通値も知っておくと、設定をリセットしたいときに役立ちます。

68
00:05:46.846 --> 00:05:51.963
インヘリットは、親要素の計算された背景色をそのまま使う指定です。

69
00:05:51.963 --> 00:05:57.881
イニシャルは、仕様で決められた初期値、つまりトランスペアレントに戻します。

70
00:05:57.881 --> 00:06:05.238
アンセットは、継承するプロパティならインヘリット、そうでなければイニシャルとして扱われます。

71
00:06:05.238 --> 00:06:12.275
バックグラウンドカラーは通常継承しないので、アンセットはイニシャルと同じ結果になります。

72
00:06:12.275 --> 00:06:20.271
リバートなどはカスケードの由来を巻き戻す値で、単に直前の行に戻る指定ではない点も覚えておきましょう。

73
00:06:20.271 --> 00:06:27.468
普段は色を直接書くことが多いですが、共通値は上書きを整理したいときに知っていると安心です。

74
00:06:27.468 --> 00:06:31.212
効かないと感じたときは、順番に確認しましょう。

75
00:06:31.212 --> 00:06:37.885
まず開発者ツールのネットワークで、スタイルシートが正常に取得されているかを見ます。

76
00:06:37.885 --> 00:06:44.884
次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを確認します。

77
00:06:44.884 --> 00:06:52.860
続いてスタイルズで、宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見てください。

78
00:06:52.860 --> 00:07:02.626
最後にコンピューテッドで最終的な値を確認し、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかもチェックします。

79
00:07:02.626 --> 00:07:06.207
一つずつ確かめれば、原因は必ず絞り込めます。

80
00:07:06.207 --> 00:07:12.880
焦らず上から順に原因を潰していくことが、初心者のうちから身につけたい確かめ方です。

81
00:07:12.880 --> 00:07:14.529
最後に互換性とまとめです。

82
00:07:14.529 --> 00:07:20.365
バックグラウンドカラーは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、

83
00:07:20.365 --> 00:07:26.201
サファリいち以降と、主要ブラウザーで古くから広く対応している、安心して使えるプロパティです。

84
00:07:26.201 --> 00:07:26.963
まとめます。

85
00:07:26.963 --> 00:07:31.086
初期値はトランスペアレントで継承はせず、色名や十六進数、アールジービーで色を指定でき、

86
00:07:31.086 --> 00:07:35.209
アルファ値で背景だけを半透明にもできました。

87
00:07:35.209 --> 00:07:39.523
練習として、薄い緑と薄いオレンジの違いを言葉で説明してみてください。

88
00:07:39.523 --> 00:07:45.232
関連するバックグラウンドやバックグラウンドイメージの記事もあわせて読むと理解が深まります。

89
00:07:45.232 --> 00:07:49.038
まずは自分の手で二色を切り替える練習から始めてみてください。

90
00:07:49.038 --> 00:07:50.180
お疲れさまでした。