CSS clamp() 計算ツール
小画面用と大画面用のサイズを入力するだけで、その間を滑らかに補間する流動的なclamp()値を生成します。フォントサイズ、パディング、マージン、ギャップに最適です。
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)計算結果の中間項にはrem単位が保持されるため、ユーザーがブラウザで200%にズームした際にもテキストが適切に拡大されます（ビューポート単位のみの値ではズームが機能しません）。
画面に合わせて流動的に変化するテキスト。
すべての計算処理はお使いのブラウザ上で行われます。入力したデータがBroBroGoにアップロードされることはありません。
よくある質問
この計算ツールはどのようにしてclamp()の値を構築しているのですか？
「最小画面幅でのサイズ」と「最大画面幅でのサイズ」の2つの基準点を指定します。このツールはその2点間を結ぶ直線を算出し、画面幅に応じてサイズが滑らかに変化するようにします。さらにそれをclamp()関数でラップすることで、最小画面幅でのサイズを下回らず、最大画面幅でのサイズを上回らないように制御します。2つの画面幅の間ではサイズが流動的に変化し、その範囲外ではそれぞれの限界値に固定されます。
なぜ計算結果がピクセルではなくremとvwで出力されるのですか？
境界値はremで出力され、可変の中間項にもrem要素が保持されます。これにより、読者がブラウザのデフォルトフォントサイズを変更したりズームしたりした際にもテキストが適切に拡大縮小されます（ピクセルやビューポート単位のみを使用すると、この挙動が阻害される原因になります）。直感的に入力できるようにサイズ指定はピクセル（px）で行い、ツールがルートフォントサイズを基準に自動でremに変換します。
フォントサイズだけでなく、余白（スペース）の調整にも使えますか？
はい、可能です。同じ計算値をpadding、margin、gap、width、heightなど、長さを指定するあらゆるプロパティに使用できます。プレビューを「ボックス」に切り替えると、テキストの代わりに余白が伸縮する様子を確認できます。なお、最小サイズと最大サイズが同じ場合、伸縮する必要がないため、結果は通常の固定値になります。
すべてのブラウザがclamp()をサポートしていますか？
はい。2020年以降、すべての主要なモダンブラウザがclamp()をサポートしているため、フォールバックなしでそのまま使用できます。ただし、最大値が非常に大きい場合や変化率が急激な場合は、支援技術を必要とするユーザーのために、ブラウザを200%ズームした際にもテキストが適切に拡大されるか一度確認することをお勧めします。