CSS clamp計算機
画面の幅に応じて、文字サイズなどを滑らかに変える clamp() の値を、最小・最大のサイズと、画面幅から計算します。
px
px
px
px
px
clamp()—
CSSの宣言(コピー用)
—
画面幅ごとの大きさ(画面幅 / 大きさ)
—
計算式
- 傾き = (最大 − 最小) ÷ (最大の画面幅 − 最小の画面幅)
- 切片 = 最小 − 傾き × 最小の画面幅
- clamp(最小, 切片 + 傾き × 100vw, 最大)
使い方のヒント
remを使うと、ユーザーがブラウザの文字サイズを変えたときも、一緒に変わるので、アクセシビリティの面で望ましいです。最大の大きさは、ユーザーが文字を拡大したときにも、十分に大きくなる値にしてください。
関連ツール
よくある質問
CSS clamp計算機では何がわかりますか？
画面の幅に応じて、文字サイズなどを滑らかに変える clamp() の値を、最小・最大のサイズと、画面幅から計算します。
何を入力すればいいですか？
次の項目を入力します: 最小のサイズ、最大のサイズ、最小になる画面の幅、最大になる画面の幅、ルートの文字サイズ。内容を変えると、結果もそれに合わせて変わります。
結果にはどんな項目が表示されますか？
「clamp()」「CSSの宣言(コピー用)」「画面幅ごとの大きさ(画面幅 / 大きさ)」などが表示されます。
どんな計算式を使っていますか？
ページ内の「計算式」にまとめています。たとえば「傾き = (最大 − 最小) ÷ (最大の画面幅 − 最小の画面幅)」のような式です。
入力した値は外部に送信されますか？
いいえ。処理はお使いのブラウザの中だけで行い、サーバーには送信しません。
結果はどのくらい正確ですか？
処理は標準的な仕様に沿っています。本番で使う前に、実際の環境(ブラウザ・OS・言語)で動作を確認してください。
結果をコピーできますか？
はい。「結果をコピー」ボタンで、表示されている結果をクリップボードにコピーできます。
スマホでも使えますか？
はい。画面の幅に合わせて表示されます。アプリのインストールや会員登録は必要ありません。
同じカテゴリ(CSS・単位)の他のツールはありますか？
はい。CSS単位変換機、px→rem計算機、CSSサイズ計算機、viewport単位計算機などがあります。