反応型CSS clamp生成器
2つの画面幅におけるフォントサイズを基準に、流動的に変化するCSSを生成します。
入力
例の値が入力されています。直接確認するか、値を変更してみてください。
入力はブラウザで処理されます。再読み込みすると例の値に戻ります。
結果
入力された例値を直接使用して結果を確認するか、値を変更してみてください。
px基準の線形補間です。ユーザーの拡大・フォント設定を考慮して実際のページで確認してください。
結果を共有
ツールリンクと結果テキストを一緒に共有します。結果にはURLを入れません。以下の内容を確認して共有してください。
計算・変換基準
画面の幅に応じて変わるフォントサイズのCSSを作成します。
線形傾きと接線を計算し、clamp(min, intercept + slope×vw, max)を求めます
入力例
360pxから16px、1280pxから24px
幅360〜1200pxでフォント16〜24pxを希望する場合、2点間を線形補間します。範囲の下では16px、上では24pxに制限されます。
使用方法
- 入力された例の値を使用するか、最小画面幅ピクセル、最大画面幅ピクセル、最小フォントサイズピクセル、最大フォントサイズピクセルの項目を変更してください。
- 結果を確認を押して下の結果を確認してください。
- 必要なら、結果をコピーして取り出すことができます。
よくある質問
クランプを使用すると、拡大アクセシビリティが自動的に保証されますか？
申し上げます。出力はpxとvwを組み合わせるため、ユーザーのフォント設定と拡大動作は実際のページで確認する必要があります。最小・最大フォントが同じ場合は固定サイズのように動作します。
計算基準と参考資料
- W3C — CSS Values and Units
rem·px·vw単位とclamp()関数