CSS Clamp() 計算機
最小・最大サイズと2つのビューポート幅から、実際に使える流動的なCSS clamp()値を計算します。傾きと切片を段階的に表示し、ライブリサイズプレビューも備えています。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
CSSのclamp(MIN, PREFERRED, MAX)を使用すると、一つの宣言で大量のメディアクエリを置き換えられます。値は最小ビューポート以下ではMINに、最大ビューポート以上ではMAXにとどまり、その間は滑らかにスケールします。難しいのはPREFERRED項、つまり0.833rem + 0.833vwのようなビューポート相対式であり、これを手計算で導出したい人はいません。この計算機は、最小サイズ、最大サイズ、そしてそれぞれが適用されるビューポート幅の4つの数値から、これを実際に計算します。
最終行だけでなく、すべての中間数値が表示されます。傾き（ビューポートのピクセルあたりにサイズが何単位増加するか）、同じ傾きをvw係数で表したもの、そしてy切片（指定した二点を正確に通るようvw項に加えられる定数）です。チュートリアルから理解せずにclamp()値を貼り付けたことのある人なら誰でも、ここで実際の計算過程を確認し、検証できます。
ビューポート幅スライダーがライブプレビューボックスを操作するため、流動的なスケーリングが計算されるだけでなく、目に見える形で確認できます。最小・最大ブレークポイント間でドラッグすると、実際のブラウザウィンドウのリサイズ時とまったく同じようにサンプルテキストがリサイズされます。出力行と内訳はキー入力ごとに更新されます。ベースフォントサイズ自体も変換が必要な場合は、pxからremへの変換ツールと自然に連携します。
タイプスケールモードに切り替えると、完全な流動タイポグラフィシステムをワンステップで構築できます。ベースサイズと modular ratio（1.125～1.5）を入力すると、small、base、h4、h3、h2、h1の6つのサイズが、それぞれ穏やかなモバイルの進行と完全なデスクトップ比率の間の独自のclamp()行として計算され、CSSカスタムプロパティのブロックとしてコピー可能な状態で得られます。