WEBVTT

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

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

3
00:00:03.187 --> 00:00:06.241
今回のテーマは、バックグラウンドリピートです。

4
00:00:06.241 --> 00:00:12.747
これは、背景画像を繰り返して表示するかどうか、そしてどのように繰り返すかを指定するプロパティです。

5
00:00:12.747 --> 00:00:17.527
たとえば、小さなドットの模様を一つだけポツンと置くのか、それとも壁紙のように領域いっぱいに敷き詰めるのか、

6
00:00:17.527 --> 00:00:22.308
その違いがこの一つの指定で変わります。

7
00:00:22.308 --> 00:00:29.611
この動画では、基本の書き方から、横だけ、縦だけ繰り返す値、間隔を調整する少し進んだ値までを順番に見ていきます。

8
00:00:29.611 --> 00:00:33.130
背景画像を扱うときには必ずセットで考える、とても基本的なプロパティですので、

9
00:00:33.130 --> 00:00:36.648
最初に全体像をつかみましょう。

10
00:00:36.648 --> 00:00:45.412
模様の見え方は、画像の大きさや置く位置とも深く関わっていますので、それらのプロパティとの組み合わせも意識しながら聞いてみてください。

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

12
00:00:47.238 --> 00:00:54.708
スライドのように、対象のクラスにバックグラウンドリピートと、繰り返し方を表す値を書きます。

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

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

15
00:01:06.826 --> 00:01:08.652
大切なのは初期値です。

16
00:01:08.652 --> 00:01:14.628
何も指定しなければ、値はリピート、つまり背景画像は自動で繰り返されます。

17
00:01:14.628 --> 00:01:20.936
だから、繰り返したくない場合は、必ず自分でノーリピートと書く必要があります。

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

19
00:01:26.912 --> 00:01:30.383
最もよく使う二つの値から見ていきましょう。

20
00:01:30.383 --> 00:01:36.333
リピートは、背景画像を縦と横の両方向に繰り返し、領域全体を敷き詰めます。

21
00:01:36.333 --> 00:01:42.945
初期値がこれなので、小さな模様を指定すると、自動的にタイルのように並ぶわけです。

22
00:01:42.945 --> 00:01:47.903
一方、ノーリピートは、画像を一つだけ表示し、繰り返しません。

23
00:01:47.903 --> 00:01:53.688
写真やロゴのように、大きく一枚だけ見せたい背景では、こちらが定番です。

24
00:01:53.688 --> 00:02:01.622
この二つを切り替えるだけで、模様が一つだけになるか、領域いっぱいに広がるかがはっきり変わります。

25
00:02:01.622 --> 00:02:07.572
まずはこの二つの違いを、自分の言葉で説明できるようになることが目標です。

26
00:02:07.572 --> 00:02:11.952
迷ったときは、まず模様を敷き詰めたいのか、一枚だけ見せたいのかを先に決めると、

27
00:02:11.952 --> 00:02:16.332
値の選択で悩まなくなります。

28
00:02:16.332 --> 00:02:19.131
次に、方向を限定する二つの値です。

29
00:02:19.131 --> 00:02:24.235
リピートエックスは横方向だけに繰り返し、縦には繰り返しません。

30
00:02:24.235 --> 00:02:30.656
横一列に模様が並ぶので、見出しの下の帯や、区切り線のような装飾に向いています。

31
00:02:30.656 --> 00:02:36.090
リピートワイはその逆で、縦方向だけに繰り返し、横には広がりません。

32
00:02:36.090 --> 00:02:39.547
サイドバーの縁を飾るような場面で使えます。

33
00:02:39.547 --> 00:02:47.450
覚え方はシンプルで、エックスは横軸、ワイは縦軸、と座標の考え方と結びつけると忘れにくくなります。

34
00:02:47.450 --> 00:02:55.024
全体に敷き詰める必要がないときは、方向を絞ることで、意図しない場所に模様が出るのを防げます。

35
00:02:55.024 --> 00:02:56.985
少し進んだ値も紹介します。

36
00:02:56.985 --> 00:03:03.171
スペースは、画像が途中で切れないように、画像どうしの間隔を自動で調整して並べます。

37
00:03:03.171 --> 00:03:06.490
端で半端に切れるのが気になるときに便利です。

38
00:03:06.490 --> 00:03:13.280
ラウンドは、画像そのものを少し伸ばしたり縮めたりして、領域にぴったり収まる個数で並べます。

39
00:03:13.280 --> 00:03:17.353
間隔ではなく大きさで調整するのがスペースとの違いです。

40
00:03:17.353 --> 00:03:24.746
また、このプロパティは値を二つ並べて書くこともでき、最初が横方向、二番目が縦方向の指定になります。

41
00:03:24.746 --> 00:03:30.932
たとえば、横は繰り返さず、縦だけ繰り返す、といった細かな組み合わせも表現できます。

42
00:03:30.932 --> 00:03:32.426
ここからは実例です。

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

44
00:03:39.300 --> 00:03:46.173
中には短い文章が入っていて、背景の上で文字がどう見えるかも一緒に確認できるようにしています。

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

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

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

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

49
00:04:07.392 --> 00:04:09.643
土台のシーエスエスの続きです。

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

51
00:04:15.346 --> 00:04:18.497
これで緑色の小さなドットが一つ描かれます。

52
00:04:18.497 --> 00:04:25.851
ポイントは、バックグラウンドサイズを四十ピクセルかける四十ピクセルと、小さく指定していることです。

53
00:04:25.851 --> 00:04:30.353
画像の大きさが領域と同じだと、繰り返しても違いが見えません。

54
00:04:30.353 --> 00:04:36.506
あえて小さな模様にしておくことで、繰り返すかどうかがはっきり分かるようになります。

55
00:04:36.506 --> 00:04:40.408
色付きの丸がタイルの一枚にあたる、と考えてください。

56
00:04:40.408 --> 00:04:44.010
この準備が、次の比較を分かりやすくしてくれます。

57
00:04:44.010 --> 00:04:52.564
このように、実験では見え方を確かめやすくする工夫が大切で、原因と結果を一つずつ結びつけて理解できるようになります。

58
00:04:52.564 --> 00:05:01.005
では、今回変更するプロパティとして、バックグラウンドリピートにノーリピートを指定した状態を見てみましょう。

59
00:05:01.005 --> 00:05:08.172
ファイルを保存してブラウザーを再読み込みすると、ドットの模様は左上に一つだけ表示されます。

60
00:05:08.172 --> 00:05:13.905
残りの広い部分には、土台で指定した薄い緑の背景色がそのまま見えています。

61
00:05:13.905 --> 00:05:20.276
あれ、背景が消えた、と感じるかもしれませんが、これは指定通りの一つだけ表示です。

62
00:05:20.276 --> 00:05:27.124
画像が一枚だけだと、領域のほとんどは背景色になる、という関係をここでつかんでください。

63
00:05:27.124 --> 00:05:31.424
繰り返しの有無で、印象が大きく変わることが分かります。

64
00:05:31.424 --> 00:05:35.780
次に、最後の行の値だけをリピートに置き換えてみましょう。

65
00:05:35.780 --> 00:05:37.802
他の指定はすべて同じです。

66
00:05:37.802 --> 00:05:45.113
今度は小さなドットが縦にも横にも繰り返され、箱の領域いっぱいに規則正しい水玉模様が広がります。

67
00:05:45.113 --> 00:05:49.002
さきほどの一つだけの状態との違いは一目瞭然ですね。

68
00:05:49.002 --> 00:05:53.202
これが、初期値がリピートであることの意味でもあります。

69
00:05:53.202 --> 00:05:59.580
小さな画像をタイルのように使うテクニックは、模様の背景やテクスチャ表現の基本です。

70
00:05:59.580 --> 00:06:04.247
逆に、写真を背景にするときにうっかりリピートのままだと、写真が何枚も並んでしまうので、

71
00:06:04.247 --> 00:06:08.913
ノーリピートの指定が欠かせません。

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

73
00:06:16.380 --> 00:06:18.761
効かないと感じたときの確認です。

74
00:06:18.761 --> 00:06:23.373
一番多いのは、指定は効いているのに、違いが見えないケースです。

75
00:06:23.373 --> 00:06:28.433
背景画像の大きさが領域と同じだと、繰り返しても見た目が変わりません。

76
00:06:28.433 --> 00:06:33.789
そんなときは、バックグラウンドサイズを小さくしてから比べ直してください。

77
00:06:33.789 --> 00:06:40.113
次に基本の確認として、スタイルシートが読み込めているか、セレクターとクラスが一致しているかを確かめ、

78
00:06:40.113 --> 00:06:46.437
開発者ツールのスタイルズで宣言が無効や上書きになっていないかを見ます。

79
00:06:46.437 --> 00:06:50.306
最後にコンピューテッドで最終的な値を確認しましょう。

80
00:06:50.306 --> 00:06:56.704
小さな画面幅や文字を拡大した状態でも、模様の上で文字が読めるかどうかも大切な確認です。

81
00:06:56.704 --> 00:06:58.719
最後に互換性とまとめです。

82
00:06:58.719 --> 00:07:03.781
バックグラウンドリピートは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、

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

84
00:07:08.843 --> 00:07:13.905
安心して使えるプロパティです。

85
00:07:13.905 --> 00:07:14.835
まとめます。

86
00:07:14.835 --> 00:07:22.273
初期値はリピートで継承はせず、ノーリピートで一つだけ、リピートエックスとワイで方向を絞れました。

87
00:07:22.273 --> 00:07:30.796
練習として、ノーリピートとリピートの違いを言葉で説明し、サイズを小さくする理由も言えるか確かめてみてください。

88
00:07:30.796 --> 00:07:37.769
関連するポジション、サイズ、イメージの記事もあわせて読むと、背景の理解がぐっと深まります。

89
00:07:37.769 --> 00:07:39.164
お疲れさまでした。