WEBVTT

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

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

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

4
00:00:05.759 --> 00:00:09.978
これは、要素の背景に関する設定を、色や画像、位置、大きさ、繰り返しまで、

5
00:00:09.978 --> 00:00:14.197
一行でまとめて指定できるショートハンドプロパティです。

6
00:00:14.197 --> 00:00:20.894
たとえば、背景をなめらかなグラデーションからやさしい単色へ、まとめて切り替えるような使い方をします。

7
00:00:20.894 --> 00:00:25.514
この動画では、バックグラウンドで何がまとまるのか、スラッシュで区切る書き方、

8
00:00:25.514 --> 00:00:30.135
そして知らないとハマる初期化の注意点まで、順番に見ていきます。

9
00:00:30.135 --> 00:00:35.358
背景はすべてのページで使う基本中の基本ですので、最初に全体像をつかみましょう。

10
00:00:35.358 --> 00:00:40.180
色と画像の両方を一度に切り替えられる手軽さが、このプロパティの魅力です。

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

12
00:00:41.825 --> 00:00:48.255
スライドのように、対象のクラスにバックグラウンドと、色や画像などの値を並べて書きます。

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

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

15
00:00:59.171 --> 00:01:07.096
このプロパティ自体に単一の初期値があるわけではなく、まとめている個別プロパティそれぞれの初期値に戻ります。

16
00:01:07.096 --> 00:01:09.339
通常は親から子へ継承しません。

17
00:01:09.339 --> 00:01:13.675
背景は要素ごとに自分で指定するものだと覚えておきましょう。

18
00:01:13.675 --> 00:01:19.208
書く場所は通常のスタイルシートで、他のプロパティと同じルールで大丈夫です。

19
00:01:19.208 --> 00:01:24.323
バックグラウンドでまとめて指定できるのは、全部で八つの個別プロパティです。

20
00:01:24.323 --> 00:01:29.162
背景色のバックグラウンドカラー、背景画像のバックグラウンドイメージ、位置のポジション、

21
00:01:29.162 --> 00:01:34.001
大きさのサイズ、繰り返しのリピート、基準のオリジン、表示範囲のクリップ、

22
00:01:34.001 --> 00:01:38.840
そしてスクロールへの追従を決めるアタッチメントです。

23
00:01:38.840 --> 00:01:42.711
これらを一行に並べられるのがショートハンドの便利さです。

24
00:01:42.711 --> 00:01:47.065
すべてを毎回書く必要はなく、必要なものだけを書けますが、書かなかった分は初期値に戻る、

25
00:01:47.065 --> 00:01:51.420
という点が次の大切なポイントになります。

26
00:01:51.420 --> 00:01:55.844
まずは八つの名前と役割の対応を、ざっくり頭に入れておきましょう。

27
00:01:55.844 --> 00:02:00.683
名前が長いので、最初はこのスライドで見比べながら書くのがおすすめです。

28
00:02:00.683 --> 00:02:02.399
値の例を見てみましょう。

29
00:02:02.399 --> 00:02:05.832
一番シンプルなのは、色だけを指定する書き方です。

30
00:02:05.832 --> 00:02:09.551
カラーコードを一つ書けば、その単色が背景になります。

31
00:02:09.551 --> 00:02:13.127
もう一つが、リニアグラデーションを使う書き方です。

32
00:02:13.127 --> 00:02:19.992
角度と二つの色を指定すると、色がなめらかに移り変わるグラデーションが背景画像として表示されます。

33
00:02:19.992 --> 00:02:24.712
ここが面白いところで、グラデーションは画像の一種として扱われます。

34
00:02:24.712 --> 00:02:29.289
単色は背景色、グラデーションは背景画像、と役割が分かれるのです。

35
00:02:29.289 --> 00:02:33.580
この違いが、後で学ぶ重なりや初期化を理解するカギになります。

36
00:02:33.580 --> 00:02:39.158
迷ったら、まず単色から試して、物足りなければグラデーションに変えてみましょう。

37
00:02:39.158 --> 00:02:43.662
位置と大きさを両方指定するときに、特別なルールがあります。

38
00:02:43.662 --> 00:02:48.632
まず位置を書き、スラッシュを挟んで、その直後に大きさを書きます。

39
00:02:48.632 --> 00:02:55.932
たとえば、センター、スラッシュ、カバー、と書けば、画像を中央に置き、全体を覆う大きさにします。

40
00:02:55.932 --> 00:03:02.455
スラッシュがないと、大きさとして解釈されず、指定が無効になってしまうこともあります。

41
00:03:02.455 --> 00:03:04.474
順番にも注意してください。

42
00:03:04.474 --> 00:03:11.618
大きさだけを単独で書くことはできず、必ず位置の後ろにスラッシュとセットで書くのが決まりです。

43
00:03:11.618 --> 00:03:15.967
最初は戸惑いますが、この組み合わせだけ覚えれば十分です。

44
00:03:15.967 --> 00:03:21.558
他の値、たとえば繰り返しは、スラッシュの後ろに続けて書くことができます。

45
00:03:21.558 --> 00:03:23.049
ここからは実例です。

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

47
00:03:29.909 --> 00:03:32.146
中には短い文章が入っています。

48
00:03:32.146 --> 00:03:36.843
シーエスエスでは、ステージに幅の上限と余白と点線の枠を付け、デモには余白と緑色の太い枠、

49
00:03:36.843 --> 00:03:41.541
文字色、そして薄い緑の背景を付けます。

50
00:03:41.541 --> 00:03:45.865
この土台があるからこそ、背景の変化が見えるようになります。

51
00:03:45.865 --> 00:03:49.668
土台はそのままにして、最後のバックグラウンドの行だけを切り替えて比べていくのが、

52
00:03:49.668 --> 00:03:53.471
この実例の進め方です。

53
00:03:53.471 --> 00:03:58.690
文章があることで、背景の上で文字が読めるかどうかも一緒に確認できます。

54
00:03:58.690 --> 00:04:04.486
土台に、バックグラウンドでリニアグラデーションを指定した状態がこちらです。

55
00:04:04.486 --> 00:04:10.440
百三十五度の角度で、薄い緑から薄い青へ、色が斜めになめらかに移り変わります。

56
00:04:10.440 --> 00:04:16.393
背景いっぱいにグラデーションが広がり、単色のときとは印象が大きく変わります。

57
00:04:16.393 --> 00:04:24.382
ファイルを保存してブラウザーを再読み込みし、まずこのグラデーションの見た目をしっかり確認してください。

58
00:04:24.382 --> 00:04:27.986
この状態が、次の単色との比較の基準になります。

59
00:04:27.986 --> 00:04:33.782
ヒーロー領域や見出しの帯など、少し目立たせたい場所でよく使われる表現です。

60
00:04:33.782 --> 00:04:39.422
色の境目がはっきりせず、柔らかい印象になるのがグラデーションの特徴です。

61
00:04:39.422 --> 00:04:42.814
では、最後の値だけを単色に変えてみましょう。

62
00:04:42.814 --> 00:04:44.818
他の指定はすべて同じです。

63
00:04:44.818 --> 00:04:50.831
今度はグラデーションが消えて、やさしいオレンジ系の単色が背景全体に広がります。

64
00:04:50.831 --> 00:04:54.840
画像から色へ、まとめて切り替わったことが分かります。

65
00:04:54.840 --> 00:04:59.388
画像ファイルを使いたい場合は、ユーアールエルの形でファイルの場所を書き、

66
00:04:59.388 --> 00:05:03.937
繰り返しや位置を続けて指定することもできます。

67
00:05:03.937 --> 00:05:08.485
色だけ、画像だけ、あるいは画像と色の両方、というように、組み合わせを一行で表現できるのが、

68
00:05:08.485 --> 00:05:13.033
バックグラウンドの強みです。

69
00:05:13.033 --> 00:05:18.738
背景色は画像が読み込めないときの下地にもなるので、合わせて書くと安心です。

70
00:05:18.738 --> 00:05:20.560
ここで一番大切な注意点です。

71
00:05:20.560 --> 00:05:25.376
バックグラウンドは、書かなかった個別の値をすべて初期値に戻してしまいます。

72
00:05:25.376 --> 00:05:30.582
たとえば、先にバックグラウンドサイズやリピートを丁寧に設定していても、後からバックグラウンドで色だけを書くと、

73
00:05:30.582 --> 00:05:35.789
そのサイズや繰り返しの設定まで消えてしまうのです。

74
00:05:35.789 --> 00:05:39.693
これが、背景が急に崩れた、というトラブルの代表的な原因です。

75
00:05:39.693 --> 00:05:45.681
色だけを変えたいときは、ショートハンドではなく、バックグラウンドカラーだけを使ってください。

76
00:05:45.681 --> 00:05:49.976
まとめる指定は、まとめて書き直すときに使う、と覚えておきましょう。

77
00:05:49.976 --> 00:05:54.922
順番を入れ替えて、ショートハンドを先に書き、個別指定を後に書く手もあります。

78
00:05:54.922 --> 00:05:57.562
効かないと感じたときの確認です。

79
00:05:57.562 --> 00:06:04.823
まず、スタイルシートが読み込めているか、セレクターとクラスが一致しているかを確かめます。

80
00:06:04.823 --> 00:06:13.239
次に、開発者ツールのスタイルズで、宣言が無効になっていないか、後の宣言に上書きされていないかを見ます。

81
00:06:13.239 --> 00:06:19.345
特に、スラッシュの書き忘れや、値の順番の間違いは無効になりやすい部分です。

82
00:06:19.345 --> 00:06:26.275
コンピューテッドで最終的な値を確認し、要素に幅や高さがあるかも合わせて調べましょう。

83
00:06:26.275 --> 00:06:33.701
小さな画面幅や文字を拡大した状態でも、文字が背景の上で読みやすいかどうかの確認も大切です。

84
00:06:33.701 --> 00:06:39.972
ネットワークで画像ファイル自体が取得できているかも、あわせて確認しましょう。

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

86
00:06:42.001 --> 00:06:46.890
バックグラウンドは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、

87
00:06:46.890 --> 00:06:51.780
サファリいち以降と、非常に古くからすべての主要ブラウザーで対応している、

88
00:06:51.780 --> 00:06:56.670
安心して使えるプロパティです。

89
00:06:56.670 --> 00:06:57.606
まとめます。

90
00:06:57.606 --> 00:07:04.160
バックグラウンドは背景の八つの設定をまとめるショートハンドで、継承はしませんでした。

91
00:07:04.160 --> 00:07:10.403
位置と大きさはスラッシュで区切り、書かなかった値は初期化される点が最重要でした。

92
00:07:10.403 --> 00:07:15.162
練習として、グラデーションと単色の違いを言葉で説明し、色だけを変えるときに使うプロパティも言えるか、

93
00:07:15.162 --> 00:07:19.922
確かめてみてください。

94
00:07:19.922 --> 00:07:24.916
次のリピートの記事で、繰り返しの詳しい指定も学んでいきましょう。

95
00:07:24.916 --> 00:07:26.320
お疲れさまでした。