WEBVTT

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

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

3
00:00:03.940 --> 00:00:07.387
今回のテーマは、オブジェクトフィットです。

4
00:00:07.387 --> 00:00:15.431
これは、イメージタグやビデオタグの中身を、決められた枠の中にどう収めるかを指定するプロパティです。

5
00:00:15.431 --> 00:00:21.258
たとえば、同じ横長の写真を同じ大きさの枠に入れても、端を切り取って枠いっぱいに見せる方法と、

6
00:00:21.258 --> 00:00:27.086
写真全体が見えるように小さく収める方法があります。

7
00:00:27.086 --> 00:00:30.697
その違いを切り替えるのがこのプロパティです。

8
00:00:30.697 --> 00:00:39.726
この動画では、カバーとコンテインを中心に、五つの値の意味、効く条件、効かないときの確認まで順番に見ていきます。

9
00:00:39.726 --> 00:00:44.897
サムネイルやヒーロー画像など、実際のサイト制作で毎日のように出会う場面ですので、

10
00:00:44.897 --> 00:00:50.068
最初にしっかりイメージをつかんでおきましょう。

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

12
00:00:51.703 --> 00:00:58.095
スライドのように、対象のクラスにオブジェクトフィットと、収め方を表す値を書くだけです。

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

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

15
00:01:08.946 --> 00:01:14.595
仕様上の初期値はフィルで、これは枠に合わせて中身を引き伸ばすという意味です。

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

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

18
00:01:23.960 --> 00:01:26.823
指定できる値は、主に五つあります。

19
00:01:26.823 --> 00:01:31.370
フィル、コンテイン、カバー、ノン、スケールダウンです。

20
00:01:31.370 --> 00:01:34.907
フィルは枠に合わせて中身を引き伸ばします。

21
00:01:34.907 --> 00:01:38.949
コンテインは中身の全体が枠に入る大きさにします。

22
00:01:38.949 --> 00:01:44.675
カバーは枠全体を覆う大きさまで広げて、はみ出した部分を切り取ります。

23
00:01:44.675 --> 00:01:47.369
ノンは元の大きさのまま置きます。

24
00:01:47.369 --> 00:01:52.927
スケールダウンは、ノンとコンテインのうち、小さくなる方を選びます。

25
00:01:52.927 --> 00:01:55.790
一度に全部覚える必要はありません。

26
00:01:55.790 --> 00:02:03.705
実務で圧倒的によく使うのはカバーとコンテインの二つなので、まずこの二つの違いを押さえましょう。

27
00:02:03.705 --> 00:02:09.262
この五つは、引き伸ばすか、全体を入れるか、覆って切り取るか、元の大きさのままか、

28
00:02:09.262 --> 00:02:14.820
という収め方の違いだと整理すると覚えやすくなります。

29
00:02:14.820 --> 00:02:16.560
まずフィルとノンです。

30
00:02:16.560 --> 00:02:22.570
フィルは初期値で、枠の幅と高さに合わせて中身を引き伸ばしたり縮めたりします。

31
00:02:22.570 --> 00:02:30.794
枠をすき間なく埋められますが、元の縦横比と枠の比率が違うと、写真が横に伸びたり縦に潰れたりして見えます。

32
00:02:30.794 --> 00:02:34.906
人物写真では顔が変形してしまうので、注意が必要です。

33
00:02:34.906 --> 00:02:40.600
一方、ノンは中身を拡大も縮小もせず、元の大きさのまま枠の中央に置きます。

34
00:02:40.600 --> 00:02:46.136
枠より中身が大きければ端が切り取られ、小さければ周りに余白が残ります。

35
00:02:46.136 --> 00:02:50.248
比率を守りたいときの基準として理解しておきましょう。

36
00:02:50.248 --> 00:02:53.861
カバーは、五つの中で最もよく使われる値です。

37
00:02:53.861 --> 00:03:00.102
中身の縦横比を保ったまま、枠全体を覆い尽くす大きさまで拡大または縮小します。

38
00:03:00.102 --> 00:03:05.522
そのため余白はできませんが、枠からはみ出した部分は切り取られます。

39
00:03:05.522 --> 00:03:09.874
カードや一覧のサムネイルで、元の写真の比率がバラバラでも枠の大きさをそろえたい、

40
00:03:09.874 --> 00:03:14.227
そんな場面にぴったりです。

41
00:03:14.227 --> 00:03:19.154
ただし、大切な被写体が端にあると切れてしまうことがあります。

42
00:03:19.154 --> 00:03:26.709
どこが切れるかは、次に学ぶオブジェクトポジションで調整できますので、組で覚えておきましょう。

43
00:03:26.709 --> 00:03:31.964
前回学んだオブジェクトポジションと組み合わせれば、切り取る位置まで細かくコントロールできる点も、

44
00:03:31.964 --> 00:03:37.220
実務で重宝される理由の一つです。

45
00:03:37.220 --> 00:03:40.798
コンテインは、カバーと正反対の考え方です。

46
00:03:40.798 --> 00:03:46.933
中身の縦横比を保ったまま、全体が枠の中にすっぽり入る大きさまで縮めます。

47
00:03:46.933 --> 00:03:54.771
写真の端まで全部見せたいときに向いていますが、枠と比率が違うと、上下や左右に余白が残ります。

48
00:03:54.771 --> 00:03:59.372
ロゴや図解など、切れてはいけない画像でよく使われます。

49
00:03:59.372 --> 00:04:07.380
もう一つのスケールダウンは、ノンとコンテインを比べて、より小さく表示される方を自動で選びます。

50
00:04:07.380 --> 00:04:12.492
元が小さい画像を無理に引き伸ばしたくないときに便利な値です。

51
00:04:12.492 --> 00:04:18.030
余白の色は要素の背景色で決まるため、背景色も合わせて指定しておくと、余白ができてもデザインが崩れず、

52
00:04:18.030 --> 00:04:23.568
意図した見た目に仕上がります。

53
00:04:23.568 --> 00:04:25.113
ここからは実例です。

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

55
00:04:32.375 --> 00:04:36.238
比較用の画像は、左に円、右に四角を配置した図です。

56
00:04:36.238 --> 00:04:40.564
シーエスエスでは、その画像を表示ブロックにし、幅は親いっぱいのひゃくパーセント、

57
00:04:40.564 --> 00:04:44.890
高さはじゅうにレムに固定します。

58
00:04:44.890 --> 00:04:52.616
枠の大きさを先に決めておくことが大切で、この土台があるからこそ、収め方の違いが見えるようになります。

59
00:04:52.616 --> 00:04:58.796
土台はそのままにして、最後のオブジェクトフィットだけを切り替えて比べていきます。

60
00:04:58.796 --> 00:05:09.148
横長の画像を横長とは違う比率の枠に入れると違いがはっきり出ますので、手元の写真で試すときも比率の違う組み合わせを選ぶのがおすすめです。

61
00:05:09.148 --> 00:05:14.415
土台に、オブジェクトフィット、カバーを指定した状態がこちらです。

62
00:05:14.415 --> 00:05:21.492
画像は縦横比を保ったまま枠を覆う大きさに広がり、枠からはみ出した部分が切り取られます。

63
00:05:21.492 --> 00:05:25.113
余白がないので、見た目はすっきりそろいます。

64
00:05:25.113 --> 00:05:30.215
その代わり、元の図の端の部分は枠の外に隠れて見えなくなります。

65
00:05:30.215 --> 00:05:37.786
ファイルを保存してブラウザーを再読み込みし、まずこの切り取る表示をしっかり確認してください。

66
00:05:37.786 --> 00:05:42.066
この状態が、次のコンテインとの比較の基準になります。

67
00:05:42.066 --> 00:05:48.320
写真の中央に被写体がある場合は、この指定がそのまま答えになることも多いです。

68
00:05:48.320 --> 00:05:52.644
では、最後の値だけをコンテインに変えてみましょう。

69
00:05:52.644 --> 00:05:54.892
他の指定はすべて同じです。

70
00:05:54.892 --> 00:06:02.847
今度は画像全体が枠の中に収まる大きさになり、先ほど切れていた端まで全部見えるようになります。

71
00:06:02.847 --> 00:06:08.382
その代わり、枠との比率の差の分だけ、上下や左右に余白が残ります。

72
00:06:08.382 --> 00:06:16.510
画像そのものも、枠の大きさも変えていないのに、切り取るか全体を収めるかだけが入れ替わりました。

73
00:06:16.510 --> 00:06:19.796
この比較が、このプロパティの本質です。

74
00:06:19.796 --> 00:06:26.195
被写体を守るか、そろって見せるか、目的に合わせて選ぶのが使い方のコツです。

75
00:06:26.195 --> 00:06:30.519
切り取るか、全体を見せるかは、写真の内容次第です。

76
00:06:30.519 --> 00:06:38.820
商品の全体像を見せたいならコンテイン、雰囲気をそろえたいならカバー、と目的で使い分けてください。

77
00:06:38.820 --> 00:06:41.442
効かないと感じたときの確認です。

78
00:06:41.442 --> 00:06:46.851
最も多いのは、画像の表示枠の幅と高さが指定されていないケースです。

79
00:06:46.851 --> 00:06:53.407
枠が中身に合わせて決まってしまうと、収め方を変えても見た目がほとんど動きません。

80
00:06:53.407 --> 00:06:57.177
まず幅と高さを決めているかを確認してください。

81
00:06:57.177 --> 00:07:02.258
また、カバーでは画像の一部が必ず切れることがあるため、オルトの内容と合わせて、

82
00:07:02.258 --> 00:07:07.339
大切な情報が失われていないかも見直しましょう。

83
00:07:07.339 --> 00:07:14.386
そのうえで、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、

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

85
00:07:21.434 --> 00:07:26.433
小さな画面幅や文字を拡大した状態でも、大切な被写体が見えているかどうかも合わせて確認しておくと、

86
00:07:26.433 --> 00:07:31.432
実利用での失敗を防げます。

87
00:07:31.432 --> 00:07:33.268
最後に互換性とまとめです。

88
00:07:33.268 --> 00:07:39.624
オブジェクトフィットは、クロームさんじゅうに以降、エッジななじゅうきゅう以降、

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

90
00:07:45.980 --> 00:07:46.828
まとめます。

91
00:07:46.828 --> 00:07:53.184
オブジェクトフィットは枠の中への中身の収め方を決め、初期値はフィル、継承はしませんでした。

92
00:07:53.184 --> 00:07:57.280
カバーは切り取って埋め、コンテインは全体を収める値でした。

93
00:07:57.280 --> 00:08:05.472
練習として、カバーとコンテインの違いを言葉で説明し、自分の画像でも、切れてよい部分があるかで値を選んでみてください。

94
00:08:05.472 --> 00:08:06.744
お疲れさまでした。

95
00:08:06.744 --> 00:08:13.382
値の名前だけでなく、効く条件である枠の大きさまで言えるようになれば、このプロパティは卒業です。

96
00:08:13.382 --> 00:08:16.772
次の背景の記事とも合わせて復習してみてください。