CSS Clamp()ジェネレーター
最小・最大サイズと、それらが適用されるビューポート範囲を設定するだけで、その間をなめらかに
スケーリングする流動的なclamp()の値が得られます。
仕組み
2つの(ビューポート, サイズ)の点が直線を定義します。その傾きがビューポート幅の係数になり、
y切片が固定のremオフセットになって、あわせてclamp(min, intercept + slope*100vw, max)
が構成されます。これはJavaScriptのリサイズリスナーではなく実際のCSSであるため、ブラウザはレイアウトの
たびにこれを再計算し、スクロール時のガタつきや誤ったサイズのちらつきが発生せず、JavaScriptが
無効な状態でも動作し続けます。
すべての値はルートフォントサイズを使ってremに変換されるため、ユーザーがアクセシビリティのために ブラウザの基準フォントサイズを変更していても、結果は正しくスケーリングされ続けます。このツールは あなたのページを読み取ることはなく、入力した数値から計算式を計算するだけです。
よくある質問
clamp()は実際には何をしているのですか?
clamp(min, preferred, max)は中間の値を採用しますが、minを下回ったりmaxを上回ったりしないようにクリップします。ここでの「preferred」の値はビューポート幅の一次関数になっているため、結果は画面サイズに応じてなめらかに大きくなり、どちらかの限界に達すると、そこで止まります。
メディアクエリの代わりにこれを使う理由は?
メディアクエリは特定のブレークポイントで固定サイズの間をジャンプするため、目に見える「カクつき」のように見えることがあります。clamp()はビューポートに応じて連続的にスケーリングするため、ウィンドウをドラッグしてもテキストや余白はなめらかにサイズが変わり、維持すべきブレークポイントもありません。
これはどこかに送信されますか?
いいえ。計算式とプレビューはすべてブラウザ内で計算されます。アップロードは一切行われません。