CSS Clamp

Generate responsive CSS clamp() values for fluid typography

この計算機について

CSS Clamp 計算機は、2つのビューポート幅の間で値を線形にスケーリングする流動的な clamp(min, preferred, max) 式を生成します。最小値と最大値 (rem または px) とビューポートの範囲を与えると、両方の点を通る直線の vw の傾きと切片を導出し、確認用に各ブレークポイントでの計算値も示します。rem にはルートフォントサイズ 16px が仮定されます。範囲が逆転している場合は検証エラーを返します。流動的なタイポグラフィやスペーシングに最適です。

CSS Clampツールの使い方

  1. 入力欄に内容を入力するか貼り付けます。
  2. 出力を確認します — 入力するたびに即座に更新されます。
  3. オプションがあれば、用途に合わせて調整します。
  4. ページの URL をコピーして、結果をそのまま共有します。

一般的な例

  • 320px で 1rem → 1280px で 2rem → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
  • 375px で 1.25rem → 1440px で 3rem → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
  • 320px で 16px → 1200px で 32px → clamp(16px, 1.8182vw + 10.1818px, 32px)

よくある質問

CSS Clampツールはどのように機能しますか？

入力または貼り付けを行うと、ツールがブラウザ内で直接処理し、結果をすぐに表示します。入力した内容がサーバーにアップロードされることはありません — すべての計算がお使いのデバイス上で行われます。

CSS Clampツールはどんな時に使いますか？

開発、デバッグ、デザイン、管理のタスクに便利です — 何もインストールせず、サードパーティのサービスにデータを預けることなく、この変換やチェックを素早く済ませたいときにいつでも使えます。

結果の信頼性はどのくらいですか？

このツールは関連する標準や仕様を直接実装しているため、出力は準拠したソフトウェアが生成するものと一致します。空の入力や不正な入力といったエッジケースは、黙って失敗するのではなく明確に報告されます。

特定の結果を他の人と共有できますか？

はい。入力は URL に反映されるため、アドレスバーをコピーしてリンクを共有すれば、相手側でもツールが同じ状態でそのまま開きます。