WEBVTT

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

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

3
00:00:03.430 --> 00:00:06.860
今回のテーマは、バックグラウンドポジションです。

4
00:00:06.860 --> 00:00:11.576
これは、背景画像を要素の中のどこに置くかを指定するプロパティです。

5
00:00:11.576 --> 00:00:15.936
たとえば、小さなドット模様なら、その模様が始まる位置がずれますし、大きな写真なら、

6
00:00:15.936 --> 00:00:20.295
見せたい部分がどこに来るかが変わります。

7
00:00:20.295 --> 00:00:25.797
この動画では、基本の書き方から、左や中央などのキーワード、ピクセルやパーセントでの指定、

8
00:00:25.797 --> 00:00:31.299
そして割合の計算でつまずきやすいポイントまでを順番に見ていきます。

9
00:00:31.299 --> 00:00:40.732
背景画像の位置は、大きさや繰り返しとセットで考えることが多いので、それらのプロパティとの組み合わせも意識しながら聞いてみてください。

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

11
00:00:42.524 --> 00:00:49.527
スライドのように、対象のクラスにバックグラウンドポジションと、位置を表す値を書きます。

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

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

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

15
00:01:03.208 --> 00:01:10.211
何も指定しなければ、値はゼロパーセント、ゼロパーセント、つまり背景は左上に置かれます。

16
00:01:10.211 --> 00:01:15.097
左上以外に置きたい場合は、必ず自分で値を書く必要があります。

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

18
00:01:20.960 --> 00:01:25.451
位置の指定で最も分かりやすいのが、キーワードです。

19
00:01:25.451 --> 00:01:31.201
横方向は、レフトで左端、センターで中央、ライトで右端を表します。

20
00:01:31.201 --> 00:01:36.411
縦方向は、トップで上端、センターで中央、ボトムで下端です。

21
00:01:36.411 --> 00:01:42.519
値を二つ並べると、原則として最初が横方向、二番目が縦方向になります。

22
00:01:42.519 --> 00:01:47.729
たとえば、ライト、ボトムと書けば、画像は右下に置かれます。

23
00:01:47.729 --> 00:01:53.838
値を一つだけ書いた場合は、もう一方は自動でセンターとして扱われます。

24
00:01:53.838 --> 00:02:02.641
まずはこのキーワードで、九つの基本位置、左上から右下までをイメージできるようになることが目標です。

25
00:02:02.641 --> 00:02:09.468
直感的に読めるので、端や中央に寄せたいときは迷わずキーワードを使いましょう。

26
00:02:09.468 --> 00:02:14.312
キーワードでは足りないときは、長さや割合で細かく指定します。

27
00:02:14.312 --> 00:02:19.398
たとえば、二十ピクセル、二十ピクセルと書くと、左上を基準に、横へ二十ピクセル、

28
00:02:19.398 --> 00:02:24.484
縦へ二十ピクセルずらした位置に画像が置かれます。

29
00:02:24.484 --> 00:02:27.229
少しだけずらしたいときに便利です。

30
00:02:27.229 --> 00:02:31.508
割合で書くこともでき、五十パーセント、五十パーセントは中央、つまりセンター、

31
00:02:31.508 --> 00:02:35.786
センターと同じ意味になります。

32
00:02:35.786 --> 00:02:39.338
キーワードと数値を混ぜて書くこともできます。

33
00:02:39.338 --> 00:02:47.573
ただし、割合の計算には独特のルールがあり、単純に箱の幅の何パーセント、とはならない点に注意が必要です。

34
00:02:47.573 --> 00:02:51.448
その仕組みは次のセクションでしっかり確認します。

35
00:02:51.448 --> 00:02:56.383
割合の計算は、このプロパティで一番つまずきやすいところです。

36
00:02:56.383 --> 00:02:59.344
基準は、箱全体の座標ではありません。

37
00:02:59.344 --> 00:03:05.266
領域の大きさから画像の大きさを引いた、余りの幅に対して割合がかかります。

38
00:03:05.266 --> 00:03:12.833
具体的に言うと、五十パーセントを指定すると、画像の中心が領域の中心に重なる位置に置かれます。

39
00:03:12.833 --> 00:03:17.767
百パーセントでは、画像の右端が領域の右端にぴったり合います。

40
00:03:17.767 --> 00:03:21.057
ゼロパーセントでは左端どうしが合います。

41
00:03:21.057 --> 00:03:26.321
つまり割合は、画像を動かせる範囲の中での位置を表しているのです。

42
00:03:26.321 --> 00:03:35.204
この考え方を知っていると、なぜ五十パーセントで中央になるのかが、暗記ではなく理解で説明できるようになります。

43
00:03:35.204 --> 00:03:36.660
ここからは実例です。

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

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

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

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

48
00:04:02.576 --> 00:04:06.580
この土台は変えずに、最後のバックグラウンドポジションの行だけを切り替えて比べていくのが、

49
00:04:06.580 --> 00:04:10.584
この実例の進め方です。

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

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

52
00:04:18.760 --> 00:04:22.462
これで緑色の小さなドットが一つの模様になります。

53
00:04:22.462 --> 00:04:30.021
バックグラウンドサイズは四十ピクセルかける四十ピクセルで、この小さなタイルが繰り返し並ぶ設定です。

54
00:04:30.021 --> 00:04:35.883
ここで大切なのは、繰り返される模様にも、並び始める起点があるということです。

55
00:04:35.883 --> 00:04:40.973
バックグラウンドポジションは、その起点を決める役割も持っています。

56
00:04:40.973 --> 00:04:45.910
模様が小さいからこそ、起点がずれると全体の並びがずれて見えます。

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

58
00:04:49.612 --> 00:04:57.970
では、今回変更するプロパティとして、バックグラウンドポジションにゼロ、ゼロを指定した状態を見てみましょう。

59
00:04:57.970 --> 00:05:01.833
ファイルを保存してブラウザーを再読み込みすると、ドットの模様は左上を起点に、

60
00:05:01.833 --> 00:05:05.697
きれいに並び始めます。

61
00:05:05.697 --> 00:05:10.112
箱の左端や上端に沿って模様がそろって見えるのが特徴です。

62
00:05:10.112 --> 00:05:14.843
これは初期値のゼロパーセント、ゼロパーセントと同じ位置です。

63
00:05:14.843 --> 00:05:18.154
まずはこの状態を基準として覚えてください。

64
00:05:18.154 --> 00:05:23.831
次に値を変えたとき、模様全体がどれだけ動いたかを比べる物差しになります。

65
00:05:23.831 --> 00:05:28.167
位置の指定は、画像を一枚だけ置く場合だけでなく、繰り返し模様の起点にも効いている、

66
00:05:28.167 --> 00:05:32.504
という点がここでの学びです。

67
00:05:32.504 --> 00:05:39.001
次に、最後の行の値だけを、二十ピクセル、二十ピクセルに置き換えてみましょう。

68
00:05:39.001 --> 00:05:41.224
他の指定はすべて同じです。

69
00:05:41.224 --> 00:05:50.286
今度は模様の起点が右へ二十ピクセル、下へ二十ピクセル動き、それに合わせてドット全体の並びが右下へずれます。

70
00:05:50.286 --> 00:06:00.545
タイル一枚が四十ピクセルなので、ちょうど半タイル分ずれたことになり、左端や上端ではドットが半分だけ顔を出す形になります。

71
00:06:00.545 --> 00:06:06.358
たった一つの値で模様の位相が変わる、というのが実感できると思います。

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

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

74
00:06:16.378 --> 00:06:21.902
まず大前提として、位置を変える対象、つまり背景画像がなければ何も動きません。

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

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

77
00:06:30.334 --> 00:06:32.805
次に多いのが、割合の思い違いです。

78
00:06:32.805 --> 00:06:39.783
五十パーセントは箱の半分の位置ではなく、中央に一致する位置だという計算ルールを思い出しましょう。

79
00:06:39.783 --> 00:06:47.487
あわせて基本の確認として、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、

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

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

82
00:06:57.383 --> 00:07:02.944
バックグラウンドポジションは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、

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

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

85
00:07:14.068 --> 00:07:15.079
まとめます。

86
00:07:15.079 --> 00:07:20.388
初期値はゼロパーセント、ゼロパーセントで継承はせず、キーワード、長さ、割合で位置を指定でき、

87
00:07:20.388 --> 00:07:25.696
割合は領域と画像の差が基準でした。

88
00:07:25.696 --> 00:07:33.112
練習として、ゼロ、ゼロと、二十ピクセル、二十ピクセルの違いを言葉で説明してみてください。

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

90
00:07:40.527 --> 00:07:42.044
お疲れさまでした。