CSS clamp() ジェネレーター

デザインカンプのSP・PCサイズから自動計算

SP・PCそれぞれの画面幅とサイズを入力するだけで、画面幅に応じて滑らかに変化するCSSのclamp()を生成します。

Clamp Settings

Property SP Width 小さい画面 px PC Width 大きい画面 px SP Size SP時のサイズ px PC Size PC時のサイズ px

Output

1rem px

Clamp Preview

画面幅 768px

375px 1440px

この画面幅でのサイズ： 21.9px

CSS

コピーしました

CSSのclamp()を使うと、画面幅に応じて文字サイズや余白などを滑らかに変化させることができます。このツールでは、デザインカンプにあるSPとPCの数値を入力するだけで、途中の計算式を自動生成します。