WEBVTT

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

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

3
00:00:03.679 --> 00:00:07.052
今回のテーマは、バックグラウンドサイズです。

4
00:00:07.052 --> 00:00:12.725
これは、背景画像をどのくらいの大きさで表示するかを指定するプロパティです。

5
00:00:12.725 --> 00:00:17.937
小さな模様を繰り返す場合は、模様一枚分のタイルの大きさが変わりますし、大きな写真の場合は、

6
00:00:17.937 --> 00:00:23.149
写真がどれだけ拡大されて見えるかが変わります。

7
00:00:23.149 --> 00:00:29.282
大きすぎても小さすぎても印象は大きく変わるので、背景デザインの要になる指定です。

8
00:00:29.282 --> 00:00:33.958
この動画では、基本の書き方から、長さや割合、オート、カバーとコンテインの違い、

9
00:00:33.958 --> 00:00:38.634
そして実例での比較までを順番に見ていきます。

10
00:00:38.634 --> 00:00:43.463
特に、写真を全面に表示する場面と、模様を繰り返す場面では、同じ指定でも見え方が大きく違うので、

11
00:00:43.463 --> 00:00:48.292
その違いも意識してみてください。

12
00:00:48.292 --> 00:00:50.047
まず基本の書き方です。

13
00:00:50.047 --> 00:00:56.749
スライドのように、対象のクラスにバックグラウンドサイズと、大きさを表す値を書きます。

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

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

16
00:01:08.398 --> 00:01:10.153
大切なのは初期値です。

17
00:01:10.153 --> 00:01:16.376
何も指定しなければ、値はオート、オートで、画像は元の大きさのまま表示されます。

18
00:01:16.376 --> 00:01:22.440
本来の大きさと違うサイズで見せたい場合は、必ず自分で値を書く必要があります。

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

20
00:01:28.184 --> 00:01:33.023
最も基本的な指定は、長さや割合で大きさを直接書く方法です。

21
00:01:33.023 --> 00:01:37.862
値を二つ並べると、最初が横幅、二番目が縦の高さになります。

22
00:01:37.862 --> 00:01:45.538
たとえば、四十ピクセル、四十ピクセルなら、一枚が四十ピクセル四方の正方形に引き伸ばされます。

23
00:01:45.538 --> 00:01:50.711
割合で書くと、要素の背景領域に対する比率で大きさが決まります。

24
00:01:50.711 --> 00:02:00.389
値を一つだけ書いた場合は、縦は自動でオートとして扱われ、後で説明するように元の縦横比を保ちながら大きさが決まります。

25
00:02:00.389 --> 00:02:06.063
細かくサイズを決めたいときは、この長さと割合の指定が土台になります。

26
00:02:06.063 --> 00:02:11.569
慣れてきたら、横だけをパーセント、縦をオートにするような組み合わせも試してみると、

27
00:02:11.569 --> 00:02:17.076
画面幅に合わせた柔軟な調整ができるようになります。

28
00:02:17.076 --> 00:02:20.414
オートは、地味ですがとても大切な値です。

29
00:02:20.414 --> 00:02:25.589
両方ともオートなら、画像は本来持っている大きさで表示されます。

30
00:02:25.589 --> 00:02:30.930
片方だけを数値で指定し、もう片方をオートにすると、画像本来の縦横比を保ったまま、

31
00:02:30.930 --> 00:02:36.271
指定した大きさに合わせて拡大や縮小が行われます。

32
00:02:36.271 --> 00:02:41.780
写真が縦に伸びたり横に潰れたりしないのは、この仕組みのおかげです。

33
00:02:41.780 --> 00:02:51.461
ただし、グラデーションのように画像自体に決まった大きさがない場合は、オートだけではサイズが定まらないこともあります。

34
00:02:51.461 --> 00:02:57.136
迷ったら、片方をオートにして比率を保つ書き方から始めるのが安全です。

35
00:02:57.136 --> 00:03:00.955
カバーは、ヒーローイメージなどによく使われる値です。

36
00:03:00.955 --> 00:03:07.858
背景領域に隙間ができないよう、画像の縦横比を保ったまま、領域全体を覆える大きさまで拡大します。

37
00:03:07.858 --> 00:03:12.704
その代わり、領域からはみ出した部分は切り取られて見えなくなります。

38
00:03:12.704 --> 00:03:19.020
写真の端が多少切れてもよいので、とにかく全面に敷き詰めたい、という場面に向いています。

39
00:03:19.020 --> 00:03:25.041
ただし、大切な人物の顔や文字が端にある写真では、切れてしまう部分に注意が必要です。

40
00:03:25.041 --> 00:03:30.769
位置を調整するバックグラウンドポジションと組み合わせて使うことも多い指定です。

41
00:03:30.769 --> 00:03:35.543
スマートフォンとパソコンで領域の形が変わる場合でも、カバーなら隙間なく表示し続けられるので、

42
00:03:35.543 --> 00:03:40.316
レスポンシブなデザインでも重宝します。

43
00:03:40.316 --> 00:03:43.518
コンテインは、カバーと対になる考え方です。

44
00:03:43.518 --> 00:03:49.618
画像の縦横比を保ったまま、画像全体が領域の中にすっぽり収まる大きさに調整します。

45
00:03:49.618 --> 00:03:54.346
ロゴやイラストのように、端まで全部見せたい画像に向いています。

46
00:03:54.346 --> 00:04:02.581
その代わり、画像と領域の比率が合わない場合は、上下や左右に余白が残り、そこには背景色が見えることがあります。

47
00:04:02.581 --> 00:04:09.138
まとめると、隙間なく覆いたいならカバー、全体を見せたいならコンテイン、と覚えましょう。

48
00:04:09.138 --> 00:04:13.409
どちらが正解かは、画像の内容と見せたい目的で決まります。

49
00:04:13.409 --> 00:04:18.212
逆に、全面に敷き詰める必要がないバナーやサムネイルでは、あえてコンテインを選ぶことで、

50
00:04:18.212 --> 00:04:23.016
画像の大切な部分が切れる事故を防げます。

51
00:04:23.016 --> 00:04:24.607
ここからは実例です。

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

53
00:04:31.924 --> 00:04:39.400
中には文章が入っていて、背景の模様の上で文字がどう見えるかも一緒に確認できるようにしています。

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

55
00:04:44.967 --> 00:04:53.398
シーエスエスでは、ステージに幅の上限と余白と点線の枠を付け、デモには余白と緑色の太い枠と文字色を付けます。

56
00:04:53.398 --> 00:04:57.613
この土台は変えずに、最後のバックグラウンドサイズの行だけを切り替えて比べていくのが、

57
00:04:57.613 --> 00:05:01.828
この実例の進め方です。

58
00:05:01.828 --> 00:05:04.359
土台のシーエスエスの続きです。

59
00:05:04.359 --> 00:05:10.771
デモの箱には、高さの下限と、背景画像として円形のグラデーションを指定します。

60
00:05:10.771 --> 00:05:14.821
これで緑色の小さなドットが一つの模様になります。

61
00:05:14.821 --> 00:05:22.414
この模様が繰り返し並ぶとき、一枚分のタイルの大きさを決めるのがバックグラウンドサイズです。

62
00:05:22.414 --> 00:05:30.176
タイルが小さければドットは細かく密に並び、タイルが大きければドットも大きく間隔も広がります。

63
00:05:30.176 --> 00:05:38.444
写真一枚の場合と違い、繰り返し模様では、サイズの変更が模様全体の密度として表れるのがポイントです。

64
00:05:38.444 --> 00:05:42.493
この準備が、次の比較を分かりやすくしてくれます。

65
00:05:42.493 --> 00:05:52.280
背景色も薄い緑を指定しておくことで、ドットの間から下地が見え、タイルの区切りがより分かりやすくなるようにしています。

66
00:05:52.280 --> 00:05:53.418
では比較です。

67
00:05:53.418 --> 00:05:59.107
最初はバックグラウンドサイズに四十ピクセル、四十ピクセルを指定します。

68
00:05:59.107 --> 00:06:06.422
ファイルを保存してブラウザーを再読み込みすると、小さなドットが細かく、密に並んで見えます。

69
00:06:06.422 --> 00:06:12.436
次に、最後の行の値だけを八十ピクセル、八十ピクセルに置き換えてみましょう。

70
00:06:12.436 --> 00:06:14.549
他の指定はすべて同じです。

71
00:06:14.549 --> 00:06:19.019
今度はタイル一枚が縦横ともに二倍になるので、ドット自体も大きくなり、並ぶ数も減って、

72
00:06:19.019 --> 00:06:23.489
全体が粗い模様に見えます。

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

74
00:06:30.804 --> 00:06:33.019
効かないと感じたときの確認です。

75
00:06:33.019 --> 00:06:38.557
まず大前提として、大きさを変える対象、つまり背景画像がなければ何も変わりません。

76
00:06:38.557 --> 00:06:42.572
背景色だけの要素では、このプロパティを指定しても見た目は変わらないので、

77
00:06:42.572 --> 00:06:46.587
イメージが指定されているか確認してください。

78
00:06:46.587 --> 00:06:51.710
次に注意したいのが、背景をまとめて指定するバックグラウンドの一括指定です。

79
00:06:51.710 --> 00:06:56.279
サイズより後に書くと、サイズが初期値へ戻ってしまうことがあります。

80
00:06:56.279 --> 00:07:02.647
あわせて、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、

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

82
00:07:09.016 --> 00:07:10.820
最後に互換性とまとめです。

83
00:07:10.820 --> 00:07:16.856
バックグラウンドサイズは、クロームさん以降、エッジじゅうに以降、ファイアフォックスよん以降、

84
00:07:16.856 --> 00:07:22.892
サファリご以降と、主要ブラウザーで広く対応している、安心して使えるプロパティです。

85
00:07:22.892 --> 00:07:23.724
まとめます。

86
00:07:23.724 --> 00:07:28.997
初期値はオート、オートで継承はせず、長さや割合で直接指定でき、カバーは領域を覆って一部が切り取られ、

87
00:07:28.997 --> 00:07:34.270
コンテインは全体を収めて余白が残る場合がありました。

88
00:07:34.270 --> 00:07:39.404
練習として、四十ピクセルと八十ピクセルの違いを言葉で説明してみてください。

89
00:07:39.404 --> 00:07:45.787
関連するイメージ、ポジション、リピートの記事もあわせて読むと、背景の理解がぐっと深まります。

90
00:07:45.787 --> 00:07:47.036
お疲れさまでした。