SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 8:09動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:01シーエスエス、リファレンス解説です。
  3. 0:04今回のテーマは、オブジェクトポジションです。
  4. 0:07これは、画像や動画といった中身を、その要素の枠の中でどの位置に置くかを決めるプロパティです。
  5. 0:15たとえば枠より大きい画像を切り取って表示するとき、左側を見せるのか、右側を見せるのかが、
  6. 0:20この指定で変わります。
  7. 0:25写真の大切な部分が切れてしまう、といった悩みを解決するのがこのプロパティです。
  8. 0:32この動画では、レフトセンターとライトセンターを比べながら、値の読み方や、
  9. 0:37効く条件、効かないときの確認まで、順番に見ていきます。
  10. 0:42写真や動画を扱う場面では、とても出番の多い考え方ですので、安心して少しずつ慣れていきましょう。
  11. 0:51まず基本の書き方です。
  12. 0:52スライドのように、対象のクラスにオブジェクトポジションと、置きたい位置を書くだけです。
  13. 0:58プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  14. 1:04クラス名は、エイチティーエムエルのクラス属性と一致させてください。
  15. 1:09仕様上の初期値は、ごじゅっぱーせんと、ごじゅっぱーせんとで、これは横も縦も中央という意味です。
  16. 1:16通常は親から子へ継承しません。
  17. 1:18画像ごとに位置が違うことが多いので、必要な要素ごとに自分で指定するものだと覚えておきましょう。
  18. 1:25一度書いたら終わりではなく、画像ごとに最適な位置が違う点も、このプロパティらしい特徴です。
  19. 1:32値の読み方です。
  20. 1:33まずはキーワードから覚えましょう。
  21. 1:36レフトとライトは横方向、トップとボトムは縦方向、センターは中央を表します。
  22. 1:42値を二つ書いたときは、原則として一つ目が横、二つ目が縦の順です。
  23. 1:47たとえばレフトセンターなら、横は左端、縦は中央です。
  24. 1:51ライトセンターなら横だけが右端に変わります。
  25. 1:55値を一つだけ書いた場合は、もう一方はセンターとして扱われます。
  26. 2:00日常の指定のほとんどは、このキーワードの組み合わせで足ります。
  27. 2:05まず言葉で位置を言えるようになることが、理解の近道です。
  28. 2:09迷ったときは、まずセンターを基準にして、そこから左右や上下へ寄せるイメージで考えると分かりやすくなります。
  29. 2:18キーワードの次は、割合と長さです。
  30. 2:21割合で書く場合、れいぱーせんとは横なら左端、縦なら上端に当たり、ひゃくぱーせんとは反対側の端に当たります。
  31. 2:30ごじゅっぱーせんとが中央なので、初期値が中央になる理由もここでつながります。
  32. 2:36たとえば、にじゅっぱーせんと、ごじゅっぱーせんとなら、少し左寄せで縦は中央です。
  33. 2:43また、ピクセルなどの長さでずらす量を指定する方法もあります。
  34. 2:48キーワードで大まかに決めて、割合で微調整する、という使い方が実務では分かりやすいでしょう。
  35. 2:55細かい位置合わせが必要なデザインでは、この割合指定がキーワードよりも頼りになる場面が多くなります。
  36. 3:03ここが一番大切なポイントです。
  37. 3:06オブジェクトポジションは、単体では目に見える変化が小さいことが多いプロパティです。
  38. 3:12効果がはっきりするのは、オブジェクトフィットでカバーを指定したときのように、
  39. 3:17中身が枠からはみ出して切り取られる場合や、逆に枠の中に余白が残る場合です。
  40. 3:23枠と中身の大きさがぴったり一致していると、置く場所に余裕がないため、値を変えても見た目は動きません。
  41. 3:30位置を変えたいときは、まず枠の大きさと、オブジェクトフィットの指定をセットで確認してください。
  42. 3:37この関係を理解しておくと、指定が効かない理由も自分で説明できるようになりますので、
  43. 3:41しっかり押さえておきましょう。
  44. 3:45ここからは実例です。
  45. 3:47エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた画像を一枚置きます。
  46. 3:53比較用の画像は、左に円、右に四角を配置した図です。
  47. 3:57シーエスエスでは、その画像を表示ブロックにし、幅は親いっぱいのひゃくぱーせんと、
  48. 4:02高さはじゅうにレムに固定して、オブジェクトフィットはカバーにしておきます。
  49. 4:07これで画像が枠に合わせて拡大され、左右が切り取られる土台ができます。
  50. 4:12土台はそのままにして、最後のオブジェクトポジションだけを切り替えて比べていきます。
  51. 4:17このように土台と変更点を分けて考えることが、比較実験を分かりやすくするコツです。
  52. 4:23土台ができたら、今回変更する一行を加えます。
  53. 4:27デモに、オブジェクトポジション、レフトセンターを指定します。
  54. 4:32すると、切り取られる画像の中で、左側が優先して表示され、左に描かれた円が枠の中に残ります。
  55. 4:39縦方向はセンターなので、上下のバランスは中央のままです。
  56. 4:44ファイルを保存してブラウザーを再読み込みし、まず左寄せの見え方をしっかり確認してください。
  57. 4:52この状態が、次の比較の基準になります。
  58. 4:55横長の元画像を横長の枠に入れても、比率が違う部分は必ずどこかが切り取られる点にも注目しましょう。
  59. 5:03左側に大切な被写体がある写真では、この指定がそのまま答えになることも少なくありません。
  60. 5:10では、最後の一行の値だけを、ライトセンターに変えてみましょう。
  61. 5:15他の指定はすべて同じです。
  62. 5:17今度は画像の右側が優先して表示され、先ほど見えていた左の円は枠の外へ隠れ、
  63. 5:22右の四角が見えるようになります。
  64. 5:26画像そのものも、枠の大きさも変えていないのに、見える部分だけが左右で入れ替わりました。
  65. 5:33この比較が、このプロパティの本質です。
  66. 5:37同じ要領で、トップやボトムを使えば縦方向の見せたい部分も選べます。
  67. 5:42人物写真なら、顔が残る側を選ぶのが典型的な使い方です。
  68. 5:47左右だけでなく、上下についても同じ考え方で応用できますので、ぜひ両方向で試してみてください。
  69. 5:54使いどころです。
  70. 5:56代表例は、カードや一覧のサムネイルです。
  71. 5:59元の写真の比率がバラバラでも、枠をそろえてカバーで表示し、オブジェクトポジションで見せたい部分を選べば、
  72. 6:05顔や商品が切れにくくなります。
  73. 6:10ここで混同しやすいのが、バックグラウンドポジションとの違いです。
  74. 6:16あちらは背景画像の位置、こちらはイメージタグなどの中身の位置を扱います。
  75. 6:22対象を取り違えると、指定しても何も変わりません。
  76. 6:26背景か中身か、最初に対象を確認する習慣を付けましょう。
  77. 6:31特に人物や商品の写真では、少しの位置の違いが見た目の印象を大きく左右します。
  78. 6:37効かないと感じたときの確認です。
  79. 6:39最初に疑うのは、枠と中身の大きさがぴったりで、動かす余地がないケースです。
  80. 6:45オブジェクトフィットがカバーやコンテインになっているか、枠に幅と高さがあるかを確認してください。
  81. 6:52次に、背景画像に対して間違って指定していないかを見直します。
  82. 6:57そのうえで、スタイルシートが読み込めているか、セレクターとクラスが一致しているかを調べ、
  83. 7:03開発者ツールのスタイルズで上書きされていないか、コンピューテッドで最終的な値も確認します。
  84. 7:10順番に切り分ければ、原因は必ず絞れます。
  85. 7:13小さな画面幅や文字を拡大した状態でも、見せたい部分が残っているかどうかも合わせて確認しておくと安心です。
  86. 7:21最後に互換性とまとめです。
  87. 7:23オブジェクトポジションは、クロームさんじゅうに以降、エッジななじゅうきゅう以降、
  88. 7:29ファイアフォックスさんじゅうろく以降、サファリじゅう以降と、現在の主要ブラウザーで広く対応しています。
  89. 7:36まとめます。
  90. 7:36オブジェクトポジションは枠の中で中身の位置を決め、初期値はごじゅっぱーせんと、
  91. 7:41ごじゅっぱーせんと、継承はしませんでした。
  92. 7:45効果が出るのは、切り取りや余白があるときでした。
  93. 7:48練習として、レフトセンターとライトセンターの違いを言葉で説明し、自分の画像でも被写体が残る値を選んでみてください。
  94. 7:57お疲れさまでした。
  95. 7:58値の意味だけでなく、効く条件まで言えるようになれば、このプロパティは卒業です。
  96. 8:03次のオブジェクトフィットと合わせて復習すると、理解がさらに深まります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

object-positionの役割と主な指定値を解説。coverで切り取る画像の見える部分が左右で変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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