VIDEO LESSON

CSSのobject-fitの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 8:17動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、オブジェクトフィットです。
0:07これは、イメージタグやビデオタグの中身を、決められた枠の中にどう収めるかを指定するプロパティです。
0:15たとえば、同じ横長の写真を同じ大きさの枠に入れても、端を切り取って枠いっぱいに見せる方法と、
0:21写真全体が見えるように小さく収める方法があります。
0:27その違いを切り替えるのがこのプロパティです。
0:30この動画では、カバーとコンテインを中心に、五つの値の意味、効く条件、効かないときの確認まで順番に見ていきます。
0:39サムネイルやヒーロー画像など、実際のサイト制作で毎日のように出会う場面ですので、
0:44最初にしっかりイメージをつかんでおきましょう。
0:50まず基本の書き方です。
0:51スライドのように、対象のクラスにオブジェクトフィットと、収め方を表す値を書くだけです。
0:58プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
1:04クラス名は、エイチティーエムエルのクラス属性と一致させてください。
1:08仕様上の初期値はフィルで、これは枠に合わせて中身を引き伸ばすという意味です。
1:14通常は親から子へ継承しません。
1:16画像ごとに収め方が違うことが多いので、必要な要素ごとに自分で指定するものだと覚えておきましょう。
1:23指定できる値は、主に五つあります。
1:26フィル、コンテイン、カバー、ノン、スケールダウンです。
1:31フィルは枠に合わせて中身を引き伸ばします。
1:34コンテインは中身の全体が枠に入る大きさにします。
1:38カバーは枠全体を覆う大きさまで広げて、はみ出した部分を切り取ります。
1:44ノンは元の大きさのまま置きます。
1:47スケールダウンは、ノンとコンテインのうち、小さくなる方を選びます。
1:52一度に全部覚える必要はありません。
1:55実務で圧倒的によく使うのはカバーとコンテインの二つなので、まずこの二つの違いを押さえましょう。
2:03この五つは、引き伸ばすか、全体を入れるか、覆って切り取るか、元の大きさのままか、
2:09という収め方の違いだと整理すると覚えやすくなります。
2:14まずフィルとノンです。
2:16フィルは初期値で、枠の幅と高さに合わせて中身を引き伸ばしたり縮めたりします。
2:22枠をすき間なく埋められますが、元の縦横比と枠の比率が違うと、写真が横に伸びたり縦に潰れたりして見えます。
2:30人物写真では顔が変形してしまうので、注意が必要です。
2:34一方、ノンは中身を拡大も縮小もせず、元の大きさのまま枠の中央に置きます。
2:40枠より中身が大きければ端が切り取られ、小さければ周りに余白が残ります。
2:46比率を守りたいときの基準として理解しておきましょう。
2:50カバーは、五つの中で最もよく使われる値です。
2:53中身の縦横比を保ったまま、枠全体を覆い尽くす大きさまで拡大または縮小します。
3:00そのため余白はできませんが、枠からはみ出した部分は切り取られます。
3:05カードや一覧のサムネイルで、元の写真の比率がバラバラでも枠の大きさをそろえたい、
3:09そんな場面にぴったりです。
3:14ただし、大切な被写体が端にあると切れてしまうことがあります。
3:19どこが切れるかは、次に学ぶオブジェクトポジションで調整できますので、組で覚えておきましょう。
3:26前回学んだオブジェクトポジションと組み合わせれば、切り取る位置まで細かくコントロールできる点も、
3:31実務で重宝される理由の一つです。
3:37コンテインは、カバーと正反対の考え方です。
3:40中身の縦横比を保ったまま、全体が枠の中にすっぽり入る大きさまで縮めます。
3:46写真の端まで全部見せたいときに向いていますが、枠と比率が違うと、上下や左右に余白が残ります。
3:54ロゴや図解など、切れてはいけない画像でよく使われます。
3:59もう一つのスケールダウンは、ノンとコンテインを比べて、より小さく表示される方を自動で選びます。
4:07元が小さい画像を無理に引き伸ばしたくないときに便利な値です。
4:12余白の色は要素の背景色で決まるため、背景色も合わせて指定しておくと、余白ができてもデザインが崩れず、
4:18意図した見た目に仕上がります。
4:23ここからは実例です。
4:25エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた画像を一枚置きます。
4:32比較用の画像は、左に円、右に四角を配置した図です。
4:36シーエスエスでは、その画像を表示ブロックにし、幅は親いっぱいのひゃくパーセント、
4:40高さはじゅうにレムに固定します。
4:44枠の大きさを先に決めておくことが大切で、この土台があるからこそ、収め方の違いが見えるようになります。
4:52土台はそのままにして、最後のオブジェクトフィットだけを切り替えて比べていきます。
4:58横長の画像を横長とは違う比率の枠に入れると違いがはっきり出ますので、手元の写真で試すときも比率の違う組み合わせを選ぶのがおすすめです。
5:09土台に、オブジェクトフィット、カバーを指定した状態がこちらです。
5:14画像は縦横比を保ったまま枠を覆う大きさに広がり、枠からはみ出した部分が切り取られます。
5:21余白がないので、見た目はすっきりそろいます。
5:25その代わり、元の図の端の部分は枠の外に隠れて見えなくなります。
5:30ファイルを保存してブラウザーを再読み込みし、まずこの切り取る表示をしっかり確認してください。
5:37この状態が、次のコンテインとの比較の基準になります。
5:42写真の中央に被写体がある場合は、この指定がそのまま答えになることも多いです。
5:48では、最後の値だけをコンテインに変えてみましょう。
5:52他の指定はすべて同じです。
5:54今度は画像全体が枠の中に収まる大きさになり、先ほど切れていた端まで全部見えるようになります。
6:02その代わり、枠との比率の差の分だけ、上下や左右に余白が残ります。
6:08画像そのものも、枠の大きさも変えていないのに、切り取るか全体を収めるかだけが入れ替わりました。
6:16この比較が、このプロパティの本質です。
6:19被写体を守るか、そろって見せるか、目的に合わせて選ぶのが使い方のコツです。
6:26切り取るか、全体を見せるかは、写真の内容次第です。
6:30商品の全体像を見せたいならコンテイン、雰囲気をそろえたいならカバー、と目的で使い分けてください。
6:38効かないと感じたときの確認です。
6:41最も多いのは、画像の表示枠の幅と高さが指定されていないケースです。
6:46枠が中身に合わせて決まってしまうと、収め方を変えても見た目がほとんど動きません。
6:53まず幅と高さを決めているかを確認してください。
6:57また、カバーでは画像の一部が必ず切れることがあるため、オルトの内容と合わせて、
7:02大切な情報が失われていないかも見直しましょう。
7:07そのうえで、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、
7:14開発者ツールのスタイルズで上書きされていないか、コンピューテッドで最終的な値も確認します。
7:21小さな画面幅や文字を拡大した状態でも、大切な被写体が見えているかどうかも合わせて確認しておくと、
7:26実利用での失敗を防げます。
7:31最後に互換性とまとめです。
7:33オブジェクトフィットは、クロームさんじゅうに以降、エッジななじゅうきゅう以降、
7:39ファイアフォックスさんじゅうろく以降、サファリじゅう以降と、現在の主要ブラウザーで広く対応しています。
7:45まとめます。
7:46オブジェクトフィットは枠の中への中身の収め方を決め、初期値はフィル、継承はしませんでした。
7:53カバーは切り取って埋め、コンテインは全体を収める値でした。
7:57練習として、カバーとコンテインの違いを言葉で説明し、自分の画像でも、切れてよい部分があるかで値を選んでみてください。
8:05お疲れさまでした。
8:06値の名前だけでなく、効く条件である枠の大きさまで言えるようになれば、このプロパティは卒業です。
8:13次の背景の記事とも合わせて復習してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

object-fitの役割と主な指定値を解説。同じ画像枠で切り抜くか、画像全体を収めるかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのobject-fitの使い方：指定値・実例・効かない原因とブラウザー互換性 →