CSS clamp()生成
画面幅に応じて変化するCSSのclamp()を計算します。
入力データを外部へ送信せず、このブラウザだけで処理します。
CSSのclamp()を生成
詳しい説明を見る
CSS clamp()生成とは
CSS clamp()生成は、画面幅に応じて滑らかに変化するCSSの値を計算するツールです。最小値と最大値の間をvwで補間したclamp()を作成できます。
利用例
スマートフォンで16px、デスクトップで24pxになる見出しのfont-sizeを計算します。
入力データの取り扱い
このツールの入力内容と処理結果は利用者のブラウザ内で扱います。ToolGoのサーバーへ送信・保存しません。
使い方
- CSSプロパティと値の単位を選びます。
- 最小・最大の画面幅と、最小・最大の値を入力します。
- 「CSSを生成する」を押し、コードをコピーします。
知っておきたいこと
- 入力した画面幅の範囲では、最小値から最大値まで直線的に変化する式を生成します。
- 生成結果は計算値です。実際のレイアウトでは、親要素の幅やブラウザの設定も確認してください。
よくある質問
font-size以外にも使えますか？
はい。padding、margin、gap、line-heightなど、長さや数値を指定するプロパティにも使えます。
clamp()は古いブラウザでも使えますか？
現行の主要ブラウザで利用できます。対応ブラウザを限定している場合は、対象環境のCSS対応状況も確認してください。