WEBVTT

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

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

3
00:00:04.137 --> 00:00:07.930
今回のテーマは、オブジェクトポジションです。

4
00:00:07.930 --> 00:00:15.860
これは、画像や動画といった中身を、その要素の枠の中でどの位置に置くかを決めるプロパティです。

5
00:00:15.860 --> 00:00:20.601
たとえば枠より大きい画像を切り取って表示するとき、左側を見せるのか、右側を見せるのかが、

6
00:00:20.601 --> 00:00:25.342
この指定で変わります。

7
00:00:25.342 --> 00:00:32.065
写真の大切な部分が切れてしまう、といった悩みを解決するのがこのプロパティです。

8
00:00:32.065 --> 00:00:37.495
この動画では、レフトセンターとライトセンターを比べながら、値の読み方や、

9
00:00:37.495 --> 00:00:42.926
効く条件、効かないときの確認まで、順番に見ていきます。

10
00:00:42.926 --> 00:00:51.028
写真や動画を扱う場面では、とても出番の多い考え方ですので、安心して少しずつ慣れていきましょう。

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

12
00:00:52.646 --> 00:00:58.971
スライドのように、対象のクラスにオブジェクトポジションと、置きたい位置を書くだけです。

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

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

15
00:01:09.708 --> 00:01:16.621
仕様上の初期値は、ごじゅっぱーせんと、ごじゅっぱーせんとで、これは横も縦も中央という意味です。

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

17
00:01:18.828 --> 00:01:25.741
画像ごとに位置が違うことが多いので、必要な要素ごとに自分で指定するものだと覚えておきましょう。

18
00:01:25.741 --> 00:01:32.360
一度書いたら終わりではなく、画像ごとに最適な位置が違う点も、このプロパティらしい特徴です。

19
00:01:32.360 --> 00:01:33.654
値の読み方です。

20
00:01:33.654 --> 00:01:36.405
まずはキーワードから覚えましょう。

21
00:01:36.405 --> 00:01:42.391
レフトとライトは横方向、トップとボトムは縦方向、センターは中央を表します。

22
00:01:42.391 --> 00:01:47.568
値を二つ書いたときは、原則として一つ目が横、二つ目が縦の順です。

23
00:01:47.568 --> 00:01:51.774
たとえばレフトセンターなら、横は左端、縦は中央です。

24
00:01:51.774 --> 00:01:55.333
ライトセンターなら横だけが右端に変わります。

25
00:01:55.333 --> 00:02:00.348
値を一つだけ書いた場合は、もう一方はセンターとして扱われます。

26
00:02:00.348 --> 00:02:05.364
日常の指定のほとんどは、このキーワードの組み合わせで足ります。

27
00:02:05.364 --> 00:02:09.894
まず言葉で位置を言えるようになることが、理解の近道です。

28
00:02:09.894 --> 00:02:18.468
迷ったときは、まずセンターを基準にして、そこから左右や上下へ寄せるイメージで考えると分かりやすくなります。

29
00:02:18.468 --> 00:02:21.302
キーワードの次は、割合と長さです。

30
00:02:21.302 --> 00:02:30.136
割合で書く場合、れいぱーせんとは横なら左端、縦なら上端に当たり、ひゃくぱーせんとは反対側の端に当たります。

31
00:02:30.136 --> 00:02:36.471
ごじゅっぱーせんとが中央なので、初期値が中央になる理由もここでつながります。

32
00:02:36.471 --> 00:02:43.138
たとえば、にじゅっぱーせんと、ごじゅっぱーせんとなら、少し左寄せで縦は中央です。

33
00:02:43.138 --> 00:02:48.139
また、ピクセルなどの長さでずらす量を指定する方法もあります。

34
00:02:48.139 --> 00:02:55.640
キーワードで大まかに決めて、割合で微調整する、という使い方が実務では分かりやすいでしょう。

35
00:02:55.640 --> 00:03:03.808
細かい位置合わせが必要なデザインでは、この割合指定がキーワードよりも頼りになる場面が多くなります。

36
00:03:03.808 --> 00:03:06.028
ここが一番大切なポイントです。

37
00:03:06.028 --> 00:03:12.095
オブジェクトポジションは、単体では目に見える変化が小さいことが多いプロパティです。

38
00:03:12.095 --> 00:03:17.645
効果がはっきりするのは、オブジェクトフィットでカバーを指定したときのように、

39
00:03:17.645 --> 00:03:23.194
中身が枠からはみ出して切り取られる場合や、逆に枠の中に余白が残る場合です。

40
00:03:23.194 --> 00:03:30.593
枠と中身の大きさがぴったり一致していると、置く場所に余裕がないため、値を変えても見た目は動きません。

41
00:03:30.593 --> 00:03:37.549
位置を変えたいときは、まず枠の大きさと、オブジェクトフィットの指定をセットで確認してください。

42
00:03:37.549 --> 00:03:41.692
この関係を理解しておくと、指定が効かない理由も自分で説明できるようになりますので、

43
00:03:41.692 --> 00:03:45.836
しっかり押さえておきましょう。

44
00:03:45.836 --> 00:03:47.206
ここからは実例です。

45
00:03:47.206 --> 00:03:53.645
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた画像を一枚置きます。

46
00:03:53.645 --> 00:03:57.071
比較用の画像は、左に円、右に四角を配置した図です。

47
00:03:57.071 --> 00:04:02.345
シーエスエスでは、その画像を表示ブロックにし、幅は親いっぱいのひゃくぱーせんと、

48
00:04:02.345 --> 00:04:07.620
高さはじゅうにレムに固定して、オブジェクトフィットはカバーにしておきます。

49
00:04:07.620 --> 00:04:12.278
これで画像が枠に合わせて拡大され、左右が切り取られる土台ができます。

50
00:04:12.278 --> 00:04:17.896
土台はそのままにして、最後のオブジェクトポジションだけを切り替えて比べていきます。

51
00:04:17.896 --> 00:04:23.376
このように土台と変更点を分けて考えることが、比較実験を分かりやすくするコツです。

52
00:04:23.376 --> 00:04:27.086
土台ができたら、今回変更する一行を加えます。

53
00:04:27.086 --> 00:04:32.144
デモに、オブジェクトポジション、レフトセンターを指定します。

54
00:04:32.144 --> 00:04:39.732
すると、切り取られる画像の中で、左側が優先して表示され、左に描かれた円が枠の中に残ります。

55
00:04:39.732 --> 00:04:44.453
縦方向はセンターなので、上下のバランスは中央のままです。

56
00:04:44.453 --> 00:04:52.040
ファイルを保存してブラウザーを再読み込みし、まず左寄せの見え方をしっかり確認してください。

57
00:04:52.040 --> 00:04:55.244
この状態が、次の比較の基準になります。

58
00:04:55.244 --> 00:05:03.338
横長の元画像を横長の枠に入れても、比率が違う部分は必ずどこかが切り取られる点にも注目しましょう。

59
00:05:03.338 --> 00:05:10.588
左側に大切な被写体がある写真では、この指定がそのまま答えになることも少なくありません。

60
00:05:10.588 --> 00:05:15.757
では、最後の一行の値だけを、ライトセンターに変えてみましょう。

61
00:05:15.757 --> 00:05:17.925
他の指定はすべて同じです。

62
00:05:17.925 --> 00:05:22.344
今度は画像の右側が優先して表示され、先ほど見えていた左の円は枠の外へ隠れ、

63
00:05:22.344 --> 00:05:26.762
右の四角が見えるようになります。

64
00:05:26.762 --> 00:05:33.933
画像そのものも、枠の大きさも変えていないのに、見える部分だけが左右で入れ替わりました。

65
00:05:33.933 --> 00:05:37.101
この比較が、このプロパティの本質です。

66
00:05:37.101 --> 00:05:42.603
同じ要領で、トップやボトムを使えば縦方向の見せたい部分も選べます。

67
00:05:42.603 --> 00:05:47.106
人物写真なら、顔が残る側を選ぶのが典型的な使い方です。

68
00:05:47.106 --> 00:05:54.776
左右だけでなく、上下についても同じ考え方で応用できますので、ぜひ両方向で試してみてください。

69
00:05:54.776 --> 00:05:56.133
使いどころです。

70
00:05:56.133 --> 00:05:59.526
代表例は、カードや一覧のサムネイルです。

71
00:05:59.526 --> 00:06:05.209
元の写真の比率がバラバラでも、枠をそろえてカバーで表示し、オブジェクトポジションで見せたい部分を選べば、

72
00:06:05.209 --> 00:06:10.891
顔や商品が切れにくくなります。

73
00:06:10.891 --> 00:06:16.320
ここで混同しやすいのが、バックグラウンドポジションとの違いです。

74
00:06:16.320 --> 00:06:22.426
あちらは背景画像の位置、こちらはイメージタグなどの中身の位置を扱います。

75
00:06:22.426 --> 00:06:26.498
対象を取り違えると、指定しても何も変わりません。

76
00:06:26.498 --> 00:06:31.078
背景か中身か、最初に対象を確認する習慣を付けましょう。

77
00:06:31.078 --> 00:06:37.524
特に人物や商品の写真では、少しの位置の違いが見た目の印象を大きく左右します。

78
00:06:37.524 --> 00:06:39.920
効かないと感じたときの確認です。

79
00:06:39.920 --> 00:06:45.462
最初に疑うのは、枠と中身の大きさがぴったりで、動かす余地がないケースです。

80
00:06:45.462 --> 00:06:52.650
オブジェクトフィットがカバーやコンテインになっているか、枠に幅と高さがあるかを確認してください。

81
00:06:52.650 --> 00:06:57.143
次に、背景画像に対して間違って指定していないかを見直します。

82
00:06:57.143 --> 00:07:03.808
そのうえで、スタイルシートが読み込めているか、セレクターとクラスが一致しているかを調べ、

83
00:07:03.808 --> 00:07:10.473
開発者ツールのスタイルズで上書きされていないか、コンピューテッドで最終的な値も確認します。

84
00:07:10.473 --> 00:07:13.468
順番に切り分ければ、原因は必ず絞れます。

85
00:07:13.468 --> 00:07:21.256
小さな画面幅や文字を拡大した状態でも、見せたい部分が残っているかどうかも合わせて確認しておくと安心です。

86
00:07:21.256 --> 00:07:23.114
最後に互換性とまとめです。

87
00:07:23.114 --> 00:07:29.618
オブジェクトポジションは、クロームさんじゅうに以降、エッジななじゅうきゅう以降、

88
00:07:29.618 --> 00:07:36.121
ファイアフォックスさんじゅうろく以降、サファリじゅう以降と、現在の主要ブラウザーで広く対応しています。

89
00:07:36.121 --> 00:07:36.979
まとめます。

90
00:07:36.979 --> 00:07:41.267
オブジェクトポジションは枠の中で中身の位置を決め、初期値はごじゅっぱーせんと、

91
00:07:41.267 --> 00:07:45.555
ごじゅっぱーせんと、継承はしませんでした。

92
00:07:45.555 --> 00:07:48.985
効果が出るのは、切り取りや余白があるときでした。

93
00:07:48.985 --> 00:07:57.132
練習として、レフトセンターとライトセンターの違いを言葉で説明し、自分の画像でも被写体が残る値を選んでみてください。

94
00:07:57.132 --> 00:07:58.419
お疲れさまでした。

95
00:07:58.419 --> 00:08:03.993
値の意味だけでなく、効く条件まで言えるようになれば、このプロパティは卒業です。

96
00:08:03.993 --> 00:08:08.996
次のオブジェクトフィットと合わせて復習すると、理解がさらに深まります。