WEBVTT

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

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

3
00:00:03.439 --> 00:00:06.735
今回のテーマは、バックグラウンドイメージです。

4
00:00:06.735 --> 00:00:11.463
これは、要素の背景に画像やグラデーションを指定するプロパティです。

5
00:00:11.463 --> 00:00:15.618
単色の背景色だけでは作れない、写真の質感や、色がなめらかに移り変わるグラデーションを、

6
00:00:15.618 --> 00:00:19.774
背景として敷くことができます。

7
00:00:19.774 --> 00:00:24.717
この動画では、基本の書き方から、画像ファイルを指定する方法、グラデーションの作り方、

8
00:00:24.717 --> 00:00:29.661
そして背景を消すノーンの役割までを順番に見ていきます。

9
00:00:29.661 --> 00:00:37.828
特に、グラデーションを付けた状態と、背景画像がない状態を比べることで、指定の違いがはっきり分かるように解説します。

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

11
00:00:39.732 --> 00:00:48.387
スライドのように、対象のクラスにバックグラウンドイメージと、画像やグラデーションを表す値を書きます。

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

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

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

15
00:01:02.928 --> 00:01:07.601
何も指定しなければ値はノーンで、背景画像はありません。

16
00:01:07.601 --> 00:01:12.448
背景を付けたい場合は、必ず自分で値を書く必要があります。

17
00:01:12.448 --> 00:01:18.680
通常は親から子へ継承しませんので、背景が欲しい要素ごとに指定しましょう。

18
00:01:18.680 --> 00:01:24.105
代表的な指定の一つが、ユーアールエルを使った画像ファイルの指定です。

19
00:01:24.105 --> 00:01:31.925
ユーアールエルのかっこの中に、画像ファイルへのパスを書くことで、その画像が背景として表示されます。

20
00:01:31.925 --> 00:01:38.148
ヒーローイメージのような大きな写真や、繰り返し使う模様の画像などに使われます。

21
00:01:38.148 --> 00:01:45.010
ただし、パスを一文字でも間違えると画像は読み込まれず、背景は空っぽになってしまいます。

22
00:01:45.010 --> 00:01:52.510
また、画像が表示されない場合でも文字が読めるように、あわせて背景色を指定しておくのが安全です。

23
00:01:52.510 --> 00:01:59.052
ファイルの場所と名前は、開発者ツールのネットワークで読み込みを確認すると安心です。

24
00:01:59.052 --> 00:02:01.774
もう一つの代表がグラデーションです。

25
00:02:01.774 --> 00:02:07.370
リニアグラデーションは、直線方向へ色がなめらかに移り変わる背景を作ります。

26
00:02:07.370 --> 00:02:13.571
最初に角度、一三五度のような方向を指定し、続けて始まりの色と終わりの色を並べます。

27
00:02:13.571 --> 00:02:18.562
今回の例では、薄い緑から薄い青へ、斜め方向に色が変わっていきます。

28
00:02:18.562 --> 00:02:25.065
画像ファイルを用意しなくても、コードだけで奥行きのある背景が作れるのが大きな利点です。

29
00:02:25.065 --> 00:02:28.392
色の数を増やせば、より複雑な変化も作れます。

30
00:02:28.392 --> 00:02:34.744
まずは二色の基本形から試して、角度を変えたときの見え方の違いを確かめてみてください。

31
00:02:34.744 --> 00:02:41.395
バックグラウンドイメージは、一つだけではなく、複数のレイヤーを重ねることもできます。

32
00:02:41.395 --> 00:02:46.779
値をカンマで区切って並べると、先に書いたものほど手前に表示されます。

33
00:02:46.779 --> 00:02:51.846
たとえば、写真の上に半透明のグラデーションを重ねれば、写真を少し暗くして、

34
00:02:51.846 --> 00:02:56.914
その上の文字を読みやすくする、といった工夫ができます。

35
00:02:56.914 --> 00:03:04.356
逆に順番を間違えると、大切な画像が隠れてしまうこともあるので、重なり順は意識して書きましょう。

36
00:03:04.356 --> 00:03:11.324
最初は一つの指定から始めて、必要になったときにレイヤーを足していく進め方がおすすめです。

37
00:03:11.324 --> 00:03:14.961
ノーンは、背景画像を表示しない、という指定です。

38
00:03:14.961 --> 00:03:19.810
初期値でもある値なので、はっきりと画像を消したい場面で使います。

39
00:03:19.810 --> 00:03:23.674
今回の実例でも、グラデーションを指定した状態と、このノーンに置き換えた状態を比べて、

40
00:03:23.674 --> 00:03:27.538
違いを確認します。

41
00:03:27.538 --> 00:03:31.630
ノーンに変えても、背景色まで消えるわけではありません。

42
00:03:31.630 --> 00:03:35.721
背景色はバックグラウンドカラーという別のプロパティが担当しているので、画像だけが消えて、

43
00:03:35.721 --> 00:03:39.813
下地の色が残ります。

44
00:03:39.813 --> 00:03:46.632
画像と色は別々に考える、という点を押さえておくと、背景まわりの指定が整理しやすくなります。

45
00:03:46.632 --> 00:03:48.065
ここからは実例です。

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

47
00:03:54.656 --> 00:04:02.107
中には文章が入っていて、背景のグラデーションの上で文字がどう見えるかも一緒に確認できるようにしています。

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

49
00:04:07.122 --> 00:04:11.707
シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けます。

50
00:04:11.707 --> 00:04:15.575
この土台は変えずに、最後のバックグラウンドイメージの行だけを切り替えて比べていくのが、

51
00:04:15.575 --> 00:04:19.444
この実例の進め方です。

52
00:04:19.444 --> 00:04:21.692
土台のシーエスエスの続きです。

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

54
00:04:28.734 --> 00:04:35.777
この準備があることで、背景画像が付いたときと消えたときの違いが、はっきり見えるようになります。

55
00:04:35.777 --> 00:04:42.070
続く別のルールで、デモに対してバックグラウンドイメージにグラデーションを指定します。

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

57
00:04:46.340 --> 00:04:50.611
この最後の行が比較の対象になります。

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

59
00:04:55.256 --> 00:04:56.442
では比較です。

60
00:04:56.442 --> 00:04:59.323
最初はグラデーションを指定します。

61
00:04:59.323 --> 00:05:04.067
ファイルを保存してブラウザーを再読み込みすると、箱の背景が薄い緑から薄い青へ、

62
00:05:04.067 --> 00:05:08.811
斜めになめらかに変わって見えます。

63
00:05:08.811 --> 00:05:13.386
次に、最後の行の値だけをノーンに置き換えてみましょう。

64
00:05:13.386 --> 00:05:15.589
他の指定はすべて同じです。

65
00:05:15.589 --> 00:05:22.197
今度はグラデーションが消えて、下地として用意していた単色の背景だけが残ります。

66
00:05:22.197 --> 00:05:27.619
写真や色の変化が消えたことで、印象が大きく変わるのが分かります。

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

68
00:05:35.244 --> 00:05:39.903
効かないと感じたときと、間違えやすい点の確認です。

69
00:05:39.903 --> 00:05:46.612
まず大切な注意として、背景画像には代替テキストのオルトを付けられません。

70
00:05:46.612 --> 00:05:55.185
内容として重要な画像は、背景ではなくイメージ要素で表示し、説明を付けられる形にしてください。

71
00:05:55.185 --> 00:06:02.267
背景はあくまで装飾として使い、文字が読める背景色も別に指定しておきましょう。

72
00:06:02.267 --> 00:06:11.305
表示されない場合は、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、

73
00:06:11.305 --> 00:06:20.344
開発者ツールで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値を確認します。

74
00:06:20.344 --> 00:06:22.055
最後に互換性とまとめです。

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

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

77
00:06:34.293 --> 00:06:38.373
グラデーションについても、主要ブラウザーで対応が進んでいます。

78
00:06:38.373 --> 00:06:39.162
まとめます。

79
00:06:39.162 --> 00:06:43.045
初期値はノーンで継承はせず、ユーアールエルで画像を、グラデーションで色の変化を指定でき、

80
00:06:43.045 --> 00:06:46.927
複数を重ねることもできました。

81
00:06:46.927 --> 00:06:51.533
練習として、グラデーションとノーンの違いを言葉で説明してみてください。

82
00:06:51.533 --> 00:06:57.060
関連するカラー、サイズ、ポジション、リピートの記事もあわせて読むと理解が深まります。

83
00:06:57.060 --> 00:06:58.244
お疲れさまでした。