object-position: center; は縦方向も中央ですか？

はい。1値指定の場合、もう片方はcenter扱いになるため、centerは実務上50% 50%と同じ意図で使えます（既定も中央です）。

% と px はどちらを使えばいいですか？

写真や動画の焦点を割合で寄せたいなら%が便利です（例：50% 25%）。端からの余白を安定させたい場合は right 12px bottom 12px のような端＋長さ指定が向きます。

object-position が効かないのですが？

まず箱のサイズ（width/height または aspect-ratio）を確認し、次に object-fit を見直します（fill だと差が出にくい）。最後に対象がやなどの置き換え要素かを確認すると切り分けが早いです。

object-fit は必ず必要ですか？

必須ではありませんが、実務で切り抜き/余白の意図を固定するなら明示した方が安全です。とくに一覧やCMS運用では、既定値に頼ると後から意図が崩れやすいです。

right 10px bottom 10px のような書き方は常に使えますか？

基本的に使えます（端からのオフセット指定）。ただし箱のサイズが変わると見え方も変わるので、余白値はスペーススケールに合わせて管理すると安定します。

cover にすると顔が切れます。背景にした方がいいですか？

背景にすると内容としての画像を扱いにくくなることがあります。まずはのまま object-position で焦点を守り、それでも厳しければ枠比率や素材側の用意（トリミング済み）を運用として決めるのがおすすめです。

object-position - 画像/動画の中身の位置を決める（object-fitとセット）

Q: cover にすると顔が切れます。背景にした方がいいですか？

背景にすると内容としての画像を扱いにくくなることがあります。まずは のまま object-position で焦点を守り、それでも厳しければ枠比率や素材側の用意（トリミング済み）を運用として決めるのがおすすめです。

The CSS object-position property sets where the content of a replaced element (like <img> or <video>) is placed inside its box. It is typically used with object-fit to control cropping and alignment.

object-position

object-position は、<img> や <video> のような「置き換え要素」の中身（画像/動画）を、箱の中でどこに寄せるかを決めるプロパティです。

ありがちな困りごと：object-fit: cover にしたら「顔が切れた」「商品が見えない」。このときの主役が object-position です（背景ではなく、画像要素そのものを“狙って見せる”ために使います）。

このページでできるようになること

object-position が「何をどこに合わせる指定か」を言葉で説明できる
キーワード（left/center/right・top/bottom）と %/px の使い分けが分かる
object-fit と組み合わせて、cover/contain 時の“見せたい部分”を狙える
「効かない」「思った位置にならない」原因を切り分けて直せる
デザインシステム視点で、再利用しやすい値・制約・運用ルールを作れる

まずは直感：`object-position` って何？

直感的には、画像（または動画）を“どこに寄せて見せるか”です。

「箱は固定。中身だけをスライドする」: <img> の表示枠（箱）を決めたうえで、中の画像を左上へ寄せたり、中央へ寄せたり、少し上へずらしたりできます。
つまり object-position は、要素そのものを動かすのではなく、要素の中身の位置を動かします。
一緒に覚える相棒は object-fit: object-fit は「中身のサイズのはめ方（伸ばす/収める/切り抜く）」。 object-position は「はめたあと、どこに寄せるか」。
実務ではこの2つはセットで扱うと、判断が早くなります。

覚え方：object-fit が「収め方」、object-position が「寄せ方」です。

正確な定義（仕様に沿った説明）

object-position は、置き換え要素（例：<img> / <video> / <iframe> など）の内容オブジェクトを、要素の内容ボックス（content box）の中でどこに配置するかを指定します。

位置指定は “X（横）” と “Y（縦）” の2軸: たとえば left top は「左上」、50% 50% は「中央」。 20px 10px は「左から20px、上から10px」です。
% は「対応する点どうしを合わせる」: 0% 0% は「中身の左上」を「箱の左上」に合わせます。 100% 100% は「中身の右下」を「箱の右下」に合わせます。 50% 50% は「中身の中心」を「箱の中心」に合わせます。
つまり % は「左上からの単純な割合」というより、端と端（または中心）を合わせる指定です。
より計算寄りに言うと、横方向のオフセットは (箱の幅 - 中身の幅) × (指定% / 100)、縦方向は (箱の高さ - 中身の高さ) × (指定% / 100) で決まります。cover で中身が大きいと差がマイナスになり、contain で中身が小さいと差がプラスになります。だから % は「端と端（中心どうし）を合わせる」感覚で捉えるのが一番迷いません。
既定値は 50% 50%（中央）: 何も指定しないと、画像/動画の中心が箱の中心に来るように配置されます。
効果が出る条件がある（ここが“効かない”の原因になりやすい）: 位置を動かして意味が出るのは、箱と中身のサイズ関係がズレているときです。
たとえば object-fit: cover のように「切り抜きが起きる」場合や、 contain のように「余白が出る」場合は、位置の指定が効いて見えます。

厳密さはここまで覚えればOKです。使うときは「箱の中で、画像/動画をどこに寄せるか」と捉えるのが一番ラクです。

基本的な使い方（代表的な値・書式）

まずは “これだけ” の型

キーワード指定（読みやすい）: left/center/right（横）と、top/center/bottom（縦）を組み合わせます。
割合指定（%）: 50% 30% のように「中心より少し上」など、直感的に“狙い”を作れます。写真の焦点（顔・商品）を守る用途で定番です。
長さ指定（pxなど）: 20px 10px のように、ピクセル単位でズラします。 UI素材（アイコン/図）や、サイズが固定に近い場面で安定しやすいです。
「端＋余白」の書き方（実務で便利）: right 16px bottom 12px のように「端から何px離す」を書けます。 “端ぴったり”より、少し内側に余白を取る方が、見た目も事故も安定します。

CSS

/* 1値：横だけ指定 → 縦は center 扱い（よく使う） */
.thumb {
    object-position: center;
}

/* 2値：横 縦（キーワード） */
.thumbTop {
    object-position: center top;
}

/* 2値：横 縦（%） */
.thumbFocus {
    object-position: 50% 25%;
}

/* 2値：横 縦（長さ） */
.thumbNudge {
    object-position: 12px 8px;
}

/* 4つのトークン：端＋余白（端からのオフセット） */
.badgeLike {
    object-position: right 12px bottom 12px;
}

ここで止まりがち：object-position だけ書いても、画像が箱に“ぴったり収まっている”状態だと見た目が変わりません。まず object-fit と、width/height で箱のサイズを作れているかを確認します。

コピペで動く最小デモ（画像ファイル不要）

このデモは外部画像を使わず、data: URLのSVGで「目印（赤/緑/青の丸と文字）」を用意しています。object-fit を cover にすると切り抜きが起き、object-position で“どこを見せるか”が変わるのが分かります。

object-fit

ヒント：fill は伸びるので、位置を変えても効果が分かりにくくなります（“効かない”の典型）。

object-position プリセット

手入力（そのまま object-position に入ります）

現在の状態：object-fit: cover; object-position: 50% 50%;

HTML

<img class="thumb" src="photo.jpg" alt="...">

CSS

.thumb {
    width: 320px;
    height: 200px;

    object-fit: cover;        /* はめ方 */
    object-position: 50% 25%; /* 寄せ方（焦点） */
}

実務メモ：「切り抜いて見せる」なら object-fit: cover を先に決め、次に object-position で“守りたい部分”を狙う、の順にすると迷いにくいです。

よくある勘違い・混同ポイント

object-position は画像要素（<img>）そのものを動かす？: 動かすのは中身（画像）です。要素の外側の配置（レイアウト）は変わりません。もし要素自体を動かしたいなら、margin や position、あるいはレイアウト（flex/grid）の話になります。
background-position と同じ？: 似ていますが対象が違います。 background-position は背景の位置、 object-position は画像/動画要素の中身の位置です。「装飾としての背景」ではなく「内容としての画像」を扱いたいなら object-position 側が主役になりやすいです。
1値だけ書くとどうなる？: 1つだけ書いた場合、もう片方は center 扱いになります。たとえば object-position: left; は left center の意味。逆に top のような縦方向のキーワードを1つだけ書いた場合は、横が center になり、center top の意味になります。
object-fit を書いていないのに効かせたい: object-fit を書かなくても、箱と中身のサイズがズレていれば位置は変えられます。ただし、実務で「狙って切り抜く」場合は cover か contain のどちらかを明示する方が安全です。
fill にしているのに位置が変わらない: object-fit: fill は「伸ばして箱を埋める」ため、切り抜きも余白も起きません。その結果、位置の違いが見えにくくなります。 “位置で解決したい”なら cover/contain/none を検討します。

実務でよくある使用例

サムネイル（一覧カード）で「顔を切らない」

一覧は比率が固定されがちなので、cover で統一してから、必要に応じて object-position で上寄せします。

CSS

.cardThumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: 50% 25%; /* 顔が上に寄りがち、という“現場の癖”に合わせる例 */
}

プロフィール画像（アバター）を“中心固定”で安定させる

アバターは「誰の画像でも破綻しない」ことが重要なので、center を基本語彙にしやすいです。

CSS

.avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

ヒーロー画像を背景ではなく <img> で扱う（アクセシビリティ寄り）

テキストや意味がある画像なら、背景にせず <img> として置く方が安全なことがあります。その場合も cover＋object-position が使えます。

CSS

.heroImg {
    width: 100%;
    height: min(52vh, 420px);
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

背景よりも「文書として意味を持たせやすい」ため、代替テキスト（alt）や周辺の説明とセットで運用しやすくなります。

動画（<video>）の“切り抜き”を整える

動画も同じです。縦横比がバラバラな素材を同じ枠に収める時に活躍します。

CSS

.videoCover {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
}

実務で起きがちな事故と回避策

事故：cover で重要な部分が切れる

原因：object-fit: cover は「箱を埋めるためにトリミング（切り抜き）が起きる」動きです。
回避策：まず object-position で“切れて困る部分”を中央からズラして守ります。それでも守れない場合は、枠の比率を変える、または画像の用意（トリミング済み素材）を運用として決める方が安全です。

事故：位置指定が端末サイズで微妙にズレる

原因：箱の縦横比が変わると、切り抜き量も変わります。同じ 50% 25% でも「どれくらい切れるか」が変わるため、ズレて見えることがあります。
回避策：ブレークポイントごとに object-position を変える、または“語彙（トークン）”を用意して切り替えます（後述のデザインシステム視点）。

事故：object-position を書いたのに効かない

原因候補：

箱のサイズが作れていない（width/height が自動のまま）
object-fit: fill で伸ばして埋めている（切り抜き/余白が無い）
そもそも置き換え要素ではない（通常の <div> などには効かない）

回避策：まず箱のサイズ（width/height）を決め、object-fit を明示し、置き換え要素に当たっているかを確認します。

事故：画像の下に謎のスキマが出る

原因：<img> は既定でインライン要素なので、文字のベースライン扱いの余白が出ることがあります。
回避策：display: block（または vertical-align: middle）で解消します。サムネイル運用では display: block が定番です。

落とし穴：「どの画像でも同じように見せたい」のに、自由入力（37% 22% など）を増やすと、運用が崩れます。迷ったら“少数の語彙”に戻し、例外はルール化して増やすのが安全です。

アクセシビリティ／UX観点での注意（必要な範囲で）

画像の意味は alt に逃がす（背景にしない利点）: 内容として意味がある画像なら、<img> として置き、適切な alt（代替テキスト）を付けられます。これは背景画像では難しい点です。
文字を画像に埋め込まない（位置ズレが事故になる）: object-position で切り抜きが起きる以上、画像内の文字は切れやすいです。重要な文字はHTMLのテキストとして置くのが原則です。
タップ/クリック対象の見え方に注意: たとえば商品画像をリンクにしている場合、object-position の調整で“肝心の部分”が見えなくなると、誤タップや誤解につながります。「何を見せたいか」を優先順位づけして、トークンで統一する方がUXが安定します。
動画は特に“意図”を固定しやすい: 動画サムネイルは素材が多様で、位置ズレの違和感が出やすいです。運用として「基本は center、例外は top」のようなルールを決めると、揺れが減ります。

デザインシステム視点

ここからは「使える」だけでなく、再利用・制約・設計・運用に繋げる見方です。object-position は自由度が高いので、放置すると“コンテンツごとにバラバラ”になりやすい領域です。

再利用しやすい値の考え方

まずは「語彙」を少なくする（3〜6個の基本セット）: いきなり自由入力を許すより、まずは少数セット（例：center、center top、center 25%、right bottom）で回せるかを検討します。 “90%はこれで足りる” を目指すと運用が安定します。
「焦点（フォーカス）」はコンポーネント単位で決める: サムネイル、アバター、ヒーロー画像では「守りたい場所」が違います。コンポーネントごとに基本位置を固定し、例外だけを許可する設計が安全です。
「端＋余白」は運用ルールにしやすい: right 12px bottom 12px のような指定は、余白スケール（spacing）と揃えることで統一感が出ます。値が“意味を持つ”ので、レビューもしやすくなります。

CSS変数（tokens）として切り出す例

CSS

:root {
    /* まずは少数の語彙 */
    --obj-pos-center: 50% 50%;
    --obj-pos-top: center top;
    --obj-pos-bottom: center bottom;

    /* “焦点”トークン（例：人物写真を上寄せにしがち） */
    --obj-focus-face: 50% 25%;

    /* 端＋余白（スペーススケールに合わせる） */
    --obj-pos-inset-br: right 12px bottom 12px;
}

.cardThumb {
    object-fit: cover;
    object-position: var(--obj-pos-center);
}

.cardThumb--face {
    object-position: var(--obj-focus-face);
}

ポイントは「自由入力を減らす」ことです。トークンに落とすと、意図が言語化され、レビュー・保守・一括調整がしやすくなります。

utility / component / data属性にする場合の設計観点

utility（例：.obj-center）: 使い回しは効きますが、増やしすぎるとクラスが雪だるま式に増えます。まずは少数（3〜6個）に絞り、「増やす条件」を決めてから追加します。
component（例：.cardThumb の中で固定）: 一番安定します。object-position をコンポーネントの責務に閉じ込めると、一覧やレイアウト変更時の事故が減ります。 “内容に近い画像”ほど、コンポーネント側で固定する価値が高いです。
data属性（例：data-focus="face"）: CMSやテンプレートで、編集者が焦点を選べるようにする場合に向きます。ただし自由入力を許すと壊れやすいので、値は列挙（例：center/top/face）に絞り、CSS側でマッピングする設計が安全です。

自由度を上げすぎた場合に起きる運用崩壊

症状：一覧でサムネイルの見え方がバラつく: 原因：都度調整（37% 22% など）が増えて、意図が共有できなくなる。
対策：「使って良い値」を少数に制約し、例外が出たら “トークン追加の議論” に回す。
症状：レスポンシブで破綻する: 原因：箱の比率が変わるのに、焦点が固定で切り抜き量が変わる。
対策：ブレークポイントごとに“焦点トークン”を切り替える（例：SPは 50% 20%、PCは 50% 35%）。

結論（設計）：object-position は自由に見えるほど、運用では制約が必要です。少数の語彙・トークン化・例外ルール、の3点セットで “作ったあと” が楽になります。

よくある質問（FAQ）

object-position: center; は縦方向も中央ですか？: はい。1値指定の場合、もう片方は center 扱いになるため、 center は実務上 50% 50% と同じ意図で使えます（既定も中央です）。
% と px はどちらを使えばいいですか？: 写真や動画の焦点を“割合で寄せたい”なら % が便利です（例：50% 25%）。端からの余白を安定させたい場合は、right 12px bottom 12px のような “端＋長さ” が向きます。
object-position が効かないのですが？: まず「箱があるか」を確認します（width/height または aspect-ratio）。次に object-fit を見直します（fill だと差が出にくい）。最後に対象が置き換え要素か（<img>/<video> など）を確認すると切り分けが早いです。
object-fit は必ず必要ですか？: 必須ではありませんが、実務で「切り抜き/余白の意図を固定する」なら明示した方が安全です。とくに一覧やCMS運用では、既定値に頼ると後から意図が崩れやすいです。
right 10px bottom 10px のような書き方は常に使えますか？: 基本的に使えます（端からのオフセット指定）。ただし、箱のサイズが変わると見え方も変わるので、余白値はデザインシステムのスペーススケールに合わせて管理すると安定します。
cover にすると顔が切れます。背景にした方がいいですか？: 背景にすると “内容としての画像” を扱いにくくなることがあります。まずは <img> のまま object-position で焦点を守り、それでも厳しければ枠比率や素材側の用意（トリミング済み）を運用として決めるのがおすすめです。

よくあるエラー早見表

位置を変えても見た目がほとんど変わらない: 対処：箱のサイズ（width/height または aspect-ratio）を作り、object-fit: cover などで切り抜き/余白が起きる状態にします。
fill にしていると位置が効かない: 対処：伸びて埋まっているだけなので、cover/contain/none を検討します。
画像の下にスキマが出る: 対処：img に display: block を指定します。
cover で顔やロゴが切れる: 対処：object-position を上寄せ/左右寄せで調整。それでも厳しければ枠比率や素材の運用ルールを見直します。
レスポンシブで焦点がズレる: 対処：ブレークポイントごとの位置切り替え、または“焦点トークン”を用意して運用します。

まとめ：迷ったときの判断軸

まず箱（width/height/aspect-ratio）を作る
次に object-fit（cover か contain）で“はめ方”を固定する
切り抜きで困ったら object-position で“守りたい部分”を狙う（例：50% 25%）
位置が増え始めたら要注意：少数の語彙・トークン化・例外ルールで運用を守る
意味のある画像は背景にせず <img> として扱い、alt を含めて設計する

CSS