object-positionは画像の枠を埋める前に見せる位置を決め、3項指定を使わない

画像を決まった大きさの枠へ入れるときは、枠を埋めるか、画像全体を見せるかを先に決める。そのうえで、枠からはみ出す部分があるなら、object-positionで何を見せるかを指定する。画像を中央に置くこと自体が正解ではない。人物の顔、商品名、申込みbuttonの近くに置く説明など、読者が最初に確認すべき部分が切れない位置を選ぶ。

Chromium Blogは3月21日、Chrome 66 Betaでobject-positionの3項指定を受け付けなくなると案内した。対象になるのは、top right 20% のように三つの値で位置を指定する書き方である。今後は一つ、二つ、四つの値を使う。画像の位置を直すときは、見た目だけで値を継ぎ足さず、どの辺を基準にどちらへ動かすかを、値の構造から書き直す。

object-fitとobject-positionは役割が違う

object-positionは、imageやvideoの内容を枠のどこへ置くかを決めるpropertyである。画像を枠いっぱいに見せるか、画像全体を枠内へ収めるかを決めるものではない。その役割はobject-fitが担う。二つを混ぜると、画像が切れた原因と、切れたあとに見せる位置の原因を分けられない。

たとえば、横長の見出し枠へ縦長の写真を置く場合を考える。object-fitで枠を埋める指定をすれば、写真の上下または左右が枠の外へ出る。その状態でobject-positionを変えると、切り取られる量を変えるのでなく、残して見せる場所を動かせる。人物写真なら、顔が枠内へ残る位置を選ぶ。商品写真なら、商品そのものと、読者が比べたい特徴が見える位置を選ぶ。

反対に、写真全体を見せなければ意味が変わる場合は、位置を動かして切り取る前に、枠を埋める指定が必要かを見直す。図面、料金表、資料の表紙のように全体が必要なimageでは、枠をきれいに埋めることより、内容を欠かさず読めることを優先する。画像の一部を隠す設計と、位置を調整するCSSを同じ判断にしない。

見せたい部分を言葉で決めてから値を選ぶ

object-positionの値を画面上で少しずつ替えるだけでは、次に同じ写真へ使うときに判断を再現できない。まず、どの部分を枠内へ残すかを言葉で決める。「人物の顔を上側へ残す」「商品を右寄せにして左側へ説明を置く」「集合写真の中央ではなく、入口の案内板を見せる」と書ければ、値を選ぶ理由も残る。

一つの値だけを書く場合は、横方向と縦方向を同じ位置へ寄せる指定になる。二つの値なら、横と縦をそれぞれ決められる。中央へ置くなら center center、左上を基準にするなら left top のように書く。これらは、画像の中心や端を枠のどこへ合わせるかを表す。

商品を右側へ置きたい場合は、横方向をrightにし、縦方向をcenterにする書き方が考えられる。ここで、文字を載せるために画像を右へ寄せたのか、商品が写真の右側に写っているから右を残すのかを区別する。同じrightでも、元画像に何が写っているかで確認する画面が変わる。CSSだけを見て、読者が何を見るかを忘れない。

percentageやlengthを使って細かく動かす場合も、最初に基準位置を決める。左端から何px動かすのか、右端から何%の位置を合わせるのかを、design fileと実機画面で確かめる。PCでよく見えても、狭い画面では枠の比率が変わり、見せたい部分が外れることがある。画像の横幅だけでなく、mobileの縦長の枠でも確認する。

3項指定は4項指定へ書き直す

Chrome 66 Betaの案内では、object-positionとperspective-originで三つの値を使う書き方を受け付けなくなる。top right 20% のような指定は、どの値が横方向の位置で、どの値が縦方向の位置と距離を表すのかが読み取りにくい。位置と距離を両方使うなら、どの端からどれだけ離すかを四つの値で明らかにする。

たとえば、上端を基準にし、右端から20%の位置へ合わせたいなら、topとrightを基準として書き、その後に横方向の距離を置く。値を三つのまま並べ替えて直したことにしない。書き直す前に、今のpageでどの部分が表示されているかを画像で残し、新しい指定に替えた後で同じ幅の画面を比べる。

この変更はChrome 66 Betaの案内であり、すべてのbrowserの実装をここだけで決めるものではない。古いbrowserを含めた表示を確認する場合は、対象browserと利用者を決め、必要な範囲で実機または検証環境を使う。ただし、三つの値で動いているからといって、そのままにしてよい理由にはならない。今後の書き方へ合わせ、意味を説明できる値へ直す方が、保守する人にも分かりやすい。

CSSを替えた後は画像と文章を同じ画面で見る

object-positionを替える作業は、CSS fileの保存で終わらない。まず変更したpageをPCとmobileで開き、写真の中で残すと決めた部分が見えるかを確認する。次に、画像の近くにある見出し、button、caption、背景との重なりを見る。人物の顔が残っていても、文字と重なって読めなければ、pageとしては直っていない。

たとえば、左側に説明文、右側に写真を置く見出しでは、PCでは右寄せの写真が機能することがある。一方、mobileでは画像と文章が縦に並ぶため、同じ位置指定では商品や人物が端へ寄りすぎる場合がある。画面幅ごとに別のobject-positionが必要か、枠の高さを変える方がよいかを決める。見た目をそろえるためのCSSと、読者が必要な内容を見つけられる画面を分けて確認する。

object-positionは、画像を整えるための飾りではない。枠から一部が見えなくなるときに、読者へ何を残して見せるかを決めるpropertyである。object-fitで画像の扱いを決め、object-positionで見せる位置を決め、三つの値で曖昧に書かれた指定は構造の分かる形へ直す。この順で扱えば、browserの変更にも対応しやすくなる。