スマートフォンサイトやレスポンシブサイトで、どの画面サイズでもデザインデータと画像の位置やサイズを完璧に合わせたい！
そんな時のために、画像の横幅などの数値の算出方法についてまとめます。

下準備

デザインデータ

今回は横幅750pxで作成しました。
横幅はどんな大きさでも問題ありません。

参考にこんなデザインを準備しました。

画像の書き出し

バラバラに配置したいパーツをそれぞれ書き出します。
今回は以下のように書き出しました。

画像
タイトル
サンタさん
プレゼント（緑）
プレゼント（白）
クリスマスツリー

画像の比率を計算

画像の位置や横幅などはすべてCSSで設定しますが、そのままの数値では各画面サイズに対応できないため、対応できる数値を計算して出します。

基本の計算式

デザインデータにおける画像の比率を百分率で算出します。

画像の横幅 ÷ デザインデータの横幅 × 100%

例：タイトル画像の横幅

例としてタイトル画像の横幅を計算してみます。

タイトル画像の横幅：661px
デザインデータの横幅：750px

上記の数値を計算式にいれて計算します。

661px ÷ 750px × 100% = 88.13%

計算できた数値88.13%を横幅に指定することで、ブラウザの横幅が変わってもデザインデータと同じ比率で表示することができます。

例：タイトル画像の左右の位置

横幅と同じように計算した数値を、marginやpadding、leftなどで指定します。

タイトル画像の左端からの位置：56px

56px ÷ 750px × 100% = 7.46%

疑似要素で配置

疑似要素に背景画像として配置する場合、横幅だけでなく縦幅の指定が必要となります。
縦幅の指定はpadding-topを使用してください。
paddingは％指定で使う場合、親要素の横幅が基準となるため同じ計算式が使用できます。
※heightは親要素の縦幅を基準とするため、縦幅が可変する要素では数値が不確定になります。

プレゼント(白)の縦幅：126px

126px ÷ 750px × 100% = 16.8%

完成

各パーツをそれぞれ計算して、CSSで指定した完成系が以下となります。

See the Pen Untitled by t-kawaguchi (@t-kawaguchi) on CodePen.

以上が画像の比率を百分率で算出して構築する方法の説明でした。
以前人に説明する機会があったのですが、うまく伝わらなかったので改めて整理のためにまとめました。

計算自体は面倒ですが、適当に入れた数値を調整していくより、手早くデザインデータの再現が可能になります。

おまけ

SCSSが使える場合は、計算式をfunctionで準備しておくと面倒な計算が不要なので便利です。

See the Pen qiita_20221123_2 by t-kawaguchi (@t-kawaguchi) on CodePen.