フォントサイズやwidth、heightの最大、最小値をCSSで調整する方法

カテゴリー: blog オン 2022年10月14日

フォントサイズやwidth、heightをレスポンシブルにあわせて可変する方法としては、vw、vhなどを使用するのがオーソドックスですが、デザインはイラストレーターやXDのようなツールで作成されるため、単位がpxになっています。

そのため、これを置き換える計算が面倒であったり、もし自動化できたとしても、デザインと比較する時に単位が違うと面倒であったります。

ここで、clampを使うと最大値、最小値をpxで指定できるのでデザインとの比較がしやすくなります。

font-size: clamp(14px, 16 / 1365 * 100vw, 16px);

左の 14px が最小値。右の 16px が最大値になります。
16 / 1365 * 100vw でvwに変換する計算がおこなわれて、かつ最大値が適用される幅を規定します。この場合は1365px以上ウィンドウ幅を広げても16px以上大きくなりません。

clamはwidth、heightのほか、top、right、bottom、leftなどにも使えるので非常に使い所がおおいです。

width: clamp(14px, 25 / 1365 * 100vw, 25px);
height: clamp(17px, 18 / 1365 * 100vw, 18px);
bottom: clamp(24px, 28 / 1365 * 100vw, 28px);

若干、記述が長くなるので使用箇所が増えてくると、入力するのがすこし面倒になってきますが、どこかにコピーしておいて、必要な時にペーストするなどすれば手間を短くできそうです。