スマートフォンサイトやレスポンシブサイトで、どの画面サイズでもデザインデータと画像の位置やサイズを完璧に合わせたい！
そんな時のために、画像の横幅などの数値の算出方法についてまとめます。
下準備
デザインデータ
今回は横幅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.