clamp()値ジェネレーター

使い方

1. プロパティを選び、最小のサイズと最大のサイズを入力してから、サイズの単位を選びます。
2. サイズが最小になるビューポートの幅とサイズが最大になるビューポートの幅に2つの幅を入力し、その単位を選びます。
3. どこかでremを使った場合は、ルートのフォントサイズ（px）を確認します。サイトが別の大きさを設定していなければ、ブラウザは16pxを使います。
4. CSSの宣言をコピーするか、計算の手順とよく使われる幅でのサイズを見て、各幅での結果を確かめます。

clamp()で、サイズを流動的にする仕組み

clamp(MIN, VAL, MAX)は、最小値、望ましい値、最大値の3つを受け取ります。CSS値と単位の仕様（英語）は、これがmax(MIN, min(VAL, MAX))とまったく同じ値を表すとしています。そのため、サイズはMINを下回らず、MAXを上回りません。その間では、VALに従います。ここでのVALは、ビューポートの幅に応じて変わる直線です。

この直線は、最小のビューポート幅での最小のサイズから、最大のビューポート幅での最大のサイズまで伸びます。その2つの幅の外では、サイズは変わりません。

slope = (largest size - smallest size) / (largest viewport - smallest viewport);  intercept = smallest size - slope x smallest viewport;  preferred value = intercept + slope x 100vw

傾き、切片、vwの項

傾きは、ビューポートの幅が1ピクセル増えるごとに、サイズがどれだけ増えるかを示します。切片は、同じ直線がビューポートの幅ゼロで達する位置です。vw単位はビューポート幅の1%なので、傾きに100を掛けた値が、ウィンドウに従う項になります。

傾きを求める前に、2つのビューポート幅と2つのサイズはピクセルに換算されます。remの値はルートのフォントサイズを掛けて換算されるので、ルートが16pxのとき、同じデザインはremでもpxでも同じ結果になります。

• 最大のサイズは、最小のサイズ以上にしてください。このツールは小さい最大のサイズを拒否します。画面が広がると直線が縮んでしまうからです。
• vwの項は、訪問者の文字サイズの設定に従いませんが、remの切片は従います。200%の拡大で確かめ、可能な限り切片はremで書いてください。

よくある質問