このツールについて
最小値、ビューポートに応じて変わる推奨値、最大値を組み合わせ、サイズを指定範囲に収めるCSS clamp()を生成します。文字のプレビューとCSS出力をすぐに確認できます。
使い方
- 生成モードを選び、対応するサイズと単位を入力します。
- 最小値が最大値以下であることを確認します。
- 出力と文字のプレビューを確認します。流動的な文字サイズのモードでは、幅が増加するビューポート範囲も指定します。
- CSSをコピーし、プロジェクトの異なるビューポート幅で表示を確認します。
使用例
- clamp(16px, 2vw, 32px)は、文字サイズを16～32pxに制限します。
- サイズを16→32px、ビューポートを320→1200pxに設定すると、補間式は両端でそれぞれ16pxと32pxになります。
- 指定したビューポート範囲を超えると、サイズは最小値または最大値に固定されます。
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);仕組みとCSSの解説
clamp(min, preferred, max)は、最小値と最大値の範囲内で推奨値を採用します。流動的なサイズの計算では、slope = (maxSize − minSize) / (maxViewport − minViewport)、intercept = minSize − slope × minViewportを求め、推奨値をcalc(intercept px + slope × 100vw)で表します。
主な用途
- 上下限のあるレスポンシブな見出しを作る。
- 2つの文字サイズを線形補間でつなぐ。
- 文字サイズの調整だけに使うメディアクエリを減らす。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
CSS clamp()とは何ですか？
中央の推奨値を、下限と上限の範囲に収めるCSSの数学関数です。
3つの値はそれぞれ何ですか？
順に最小値、推奨値、最大値です。このツールはサイズと単位を検証し、上下限が逆転している場合はエラーにします。
レスポンシブな文字サイズに適しているのはなぜですか？
推奨値にvwを使うと、ビューポートに応じて変化させながら、上下限で文字が小さすぎたり大きすぎたりするのを防げるためです。
流動的なサイズのモードで、異なる2つのビューポート幅が必要なのはなぜですか？
2つの幅で線形補間の区間を決めるためです。ゼロ除算や逆向きの区間を防ぐため、最大幅は最小幅より大きくする必要があります。
clamp()はどのブラウザーに対応していますか？
現在の主要ブラウザーで広く対応しています。古いブラウザーも対象にする場合は、clamp()の宣言より前に固定サイズを記述して代替値にできます。