Object-position プロパティ

最終更新：2026-09-13

object-position Object-position プロパティ

object-position プロパティは、<img> や <video> などの置換要素のコンテンツがコンテナ内のどこに表示されるかを制御します。object-fit によって余白が生じたりコンテンツが切り取られたりする場合、object-position は重要な部分が可視領域内に残るよう位置揃えの焦点を調整します。

カテゴリ
初期値	50% 50%
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

object-position: <position>;

⚙️ 値

値	タイプ	説明
`<length> \| <percentage>`	タイプ	コンテンツ位置の座標
`left \| center \| right \| top \| bottom`	キーワード	定義済みの位置

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
object-position	✓ v30	✓ v12	✓ v36	✓ v9	✓ v16
すべての主要ブラウザーでサポート

ヒント： object-position は通常、object-fit: cover と組み合わせて、重要なコンテンツ（人物の頭など）をクロップ内に残すために使われます。

ヒント： left、center、right、top、bottom のキーワードと具体的な長さやパーセンテージの値に対応しており、background-position と同様です。

❓ よくある質問

Qobject-position プロパティは CSS の transition でアニメーションできますか？

Aはい。object-position は長さ／パーセンテージ型のプロパティなので、transition と animation に対応しています。よく使われるのはホバー時のフォーカス移動で、たとえばマウスが入ったときに画像が中央から左上へゆっくり動きます。ただしアニメーションすると再描画が発生するため、大きな画像ではパフォーマンスに注意してください。transform などの合成プロパティと組み合わせることもできます。

QCSS における object-position のパーセンテージは何に対するものですか？

Aパーセンテージは、コンテナサイズとコンテンツサイズの差を基準に計算されます。50% 50% はデフォルトの中央揃えです。100% 100% はコンテンツの右下隅をコンテナの右下隅に合わせ、0% 50% はコンテンツの左端をコンテナの左端に合わせます。簡単に言えば、パーセンテージが大きいほどコンテンツはその方向へ遠くまで動き、余分な部分は切り取られるか余白として残ります。

QCSS で object-fit: cover と object-position はどう連携しますか？

Acover はコンテナを埋めて余分な部分を切り取り、object-position は「どこを切り取るか」を決定します。頭頂部を残す必要があるアバターなら、object-fit: cover; object-position: top; と書きます。画像ウォールや EC のメイン画像では、各画像の視覚的焦点（顔や商品本体）を固定位置に揃えると、ずっとプロフェッショナルに見えます。

Qobject-position: center と object-position: 50% 50% は同じですか？

A効果は完全に同じで、どちらもコンテンツを水平・垂直方向に中央揃えします。object-position の位置指定構文は background-position と一致しており、left、center、right、top、bottom のキーワードや長さの値、パーセンテージ、さらに right 10px top 20px のようなオフセット記法にも対応しています。正確な制御が必要な場合は長さやパーセンテージを使ってください。