📐
無料CSS クランプ() ジェネレーター
レスポンシブなタイポグラフィとスペーシングのための流動的なCSS clamp()値を生成します。最小・最大サイズとビューポート範囲を設定し、ライブプレビューを確認して、1行のCSSをコピーできます。
読み込み後はオフラインでも動作
出力単位:
CSS 値
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwindクラス
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px 幅 → 21.9px
Aa 22px
各ビューポートでのレンダリングサイズ
375px 幅Aa 16px
908px 幅Aa 24px
1440px 幅Aa 32px
clamp(min, preferred, max) はビューポートに応じて値を流動的にスケールし、最小・最大でロックします。タイポグラフィ・スペーシング・幅に対するメディアクエリの積み重ねを1行で置き換えられます。
主な用途
- フルイドレスポンシブタイポグラフィを作成1行でモバイルとデスクトップ間のフォントサイズをスムーズにスケーリングします。
- フルイドマージンとパディングセクション間隔がブレークポイントでジャンプする代わりにビューポートで成長するようにします。
- clamp()でメディアクエリを置換ブレークポイント上書きのスタックを単一のフルイド値に折りたたみます。
- フルイドタイプスケールを構築設計システムタイプスケール用の一貫したclamp()ステップを生成します。
- フルイドヒーローおよび表示見出し大きなランディングページの見出しを劇的にしかし安全にスケーリングさせます。
使い方
このツールはCSSのclamp()値を、手書きの線形補間の式を使って計算します — ライブラリもサーバーとのやり取りも不要です。2つのサイズと2つのビューポート幅を入力すると、計算はブラウザ内で即座に実行され、それらのブレークポイント間でテキストや余白を滑らかにスケールさせるvwベースの優先値を持つ、貼り付けてすぐ使えるclamp()式が生成されます。
- 1線形の傾きの計算ツールはピクセル対ピクセルの傾きを計算します：(maxSize - minSize) / (maxViewport - minViewport)。この傾きは100を掛けることでvw単位に変換されます。これがCSSのビューポート相対スケーリングの中核となる仕組みです。
- 2切片の導出切片オフセット（pxまたはrem単位）は、線形関数が最小ビューポートで正確に最小サイズに達するように計算されます。傾きと切片が合わさってclamp()内の優先値 — 実際にスケールする部分 — を形成します。
- 3単位変換と出力のフォーマットrem出力を選ぶと、すべてのピクセル値はclamp()文字列に書き込まれる前に設定されたルートフォントサイズ（デフォルト16px）で割られます。対応するTailwindの任意値クラスも生成され、Tailwindの構文に従ってスペースがアンダースコアに置き換えられます。
- 4ライブなビューポートスライダープレビューレンジスライダーで320pxから1920px幅までスクラブできます。各位置で同じ傾きと切片の式がクランプされたサイズをリアルタイムで評価し、その計算されたピクセルサイズでサンプルテキストを描画するため、何もコピーする前にスケーリングの挙動を確認できます。