CSS clamp() 計算ツール

最小・最大サイズと 2 つのビューポート幅を、流動的な CSS clamp() 値にブラウザ内でリアルタイム計算します。

CSS clamp() 計算ツールはすべてブラウザ内で動作します。入力したビューポート幅・サイズ・ルートフォントサイズは端末から離れず、ArrayKit には何もアップロードされません。

CSS 単位変換ツールを開く

CSS clamp 計算ツール について

CSS clamp() 計算ツールは、4 つの数値 — ピクセル単位の最小・最大サイズと、それらが対応する 2 つのビューポート幅 — を、流動的なタイポグラフィやスペーシングにそのまま貼り付けられる clamp() 値に変換します。2 つのアンカーポイントの間に直線を当てはめ、vw の傾きと rem の切片を算出し、小さいビューポート未満では最小値に、大きいビューポート超では最大値に固定します。ライブプレビューのスライダーが、その間の任意の幅で実際にレンダリングされるサイズを表示するため、公開前にランプを目で確認できます。生の clamp() 値、font-size 宣言、または Tailwind の任意値をコピーできます。すべては端末上で計算され、入力したサイズはブラウザに留まり、ArrayKit にアップロードされることはありません。

機能

CSS clamp 計算ツール の使い方

  1. 最小・最大のビューポート幅をピクセルで入力します
  2. それらの幅で要素が到達すべき最小・最大サイズを入力します
  3. デフォルトの 16px でない場合はルートフォントサイズを調整します
  4. プレビュースライダーをドラッグして範囲全体のレンダリングサイズを確認します
  5. clamp() 値または CSS 宣言をスタイルシートにコピーします

例

入力

min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px

出力

font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);

320px で 16px、1200px で 24px に成長し、その帯域の外では一定に保たれます。

よくあるエラーとトラブルシューティング

よくある質問

CSS clamp() 計算ツールは vw の傾きをどう計算しますか？
2 つのアンカーポイントを通る直線を引きます: slope = (maxSize − minSize) / (maxViewport − minViewport)。100vw はビューポート幅に等しいため、値の中の vw 係数はこの傾きに 100 を掛けたもので、rem の切片は幅ゼロのビューポートまで直線を延ばしたときに残る値です。
中間項が rem と vw を混ぜているのはなぜですか？
優先値は直線です。幅に依存しない固定部分（rem の切片）に、ビューポートとともに成長する部分（vw の傾き）を足したものです。2 つを混ぜることで、ブレークポイントで飛び跳ねる代わりに、最小と最大の間でサイズが滑らかにスケールします。
clamp の境界には px と rem のどちらを使うべきですか？
rem の境界はユーザーのブラウザのフォントサイズ設定を尊重し、アクセシビリティに優れるため、このツールはデフォルトで rem を出力します。読み出しを px に切り替えられますが、テキストのサイズ指定には rem の clamp 境界のほうが安全な選択です。
同じ clamp() 値をマージンやギャップに使えますか？
はい。clamp() は任意の長さに使えるため、この値は font-size だけでなく padding・margin・gap・グリッドトラックにも適用できます。流動的スペーシングのプリセットを出発点にし、最小と最大のサイズを調整してください。
どのルートフォントサイズを入力すべきですか？
ページが html 要素に設定している値を使ってください — 16px はブラウザのデフォルトであり、このツールのデフォルトです。ルートを別の場所でスケールしている場合は、その値を入力して rem 出力が実際に見えるピクセルに対応するようにしてください。
入力したサイズはどこかにアップロードされますか？
いいえ。CSS clamp() 計算ツールはすべてブラウザ内で動作します。入力したビューポート幅とサイズは端末上で値を計算するためだけに使われ、ArrayKit に送信されることはありません。

関連ツール

すべての ArrayKit ツール