CSS clamp() ジェネレーター

デザインカンプのSP・PCサイズから自動計算

SP・PCそれぞれの画面幅とサイズを入力するだけで、 画面幅に応じて滑らかに変化するCSSのclamp()を自動生成できます。
px・remの出力に対応し、font-sizeや余白などのレスポンシブ指定に使える無料ツールです。

Clamp Settings

Output

Preview

Clamp Preview

画面幅 768px
375px 1440px

この画面幅でのサイズ： 21.9px

CSS

コピーしました

CSS clamp() ジェネレーターの使い方

このツールでは、SPとPCそれぞれの画面幅とサイズを入力するだけで、 画面幅に応じて滑らかに変化するCSSのclamp()を自動計算できます。

  1. Propertyで生成したいCSSプロパティを選択します。
  2. SP WidthにデザインカンプのSP画面幅を入力します。
  3. PC WidthにPC側の画面幅を入力します。
  4. SP Size・PC Sizeに、それぞれのデザイン上のサイズを入力します。
  5. px・remから出力したい単位を選択します。
  6. 生成されたCSSを「CSSをコピー」ボタンでコピーします。

CSSのclamp()とは？

clamp()は、最小値・推奨値・最大値の3つを指定できるCSS関数です。 画面幅に合わせて値を変化させつつ、指定した最小値と最大値の範囲内に収めることができます。 

font-size: clamp(16px, 1.5023vw + 10.3662px, 32px);

この例では、画面幅が小さいときは16px、 大きいときは32pxを上限とし、その間では画面幅に応じて文字サイズが滑らかに変化します。

デザインカンプのSP・PCサイズからclamp()を作る方法

例えばSP幅375pxで文字サイズ16px、 PC幅1440pxで文字サイズ32pxのデザインカンプがある場合、 この4つの値を入力するだけで途中の計算式を自動生成できます。 

SP Width：375px
PC Width：1440px

SP Size：16px
PC Size：32px
font-size: clamp(16px, 1.5023vw + 10.3662px, 32px);

pxとremのどちらで出力すればいい？

デザインカンプではpxでサイズが指定されていることが多いため、 このツールでは入力値をpxに統一しています。 出力時にpxまたはremを選択できます。

単位 向いているケース
px デザインカンプの数値をそのまま使いたい場合や、 直感的にサイズを管理したい場合。
rem ルートのfont-sizeを基準にして、 サイト全体のサイズ管理を行いたい場合。

このツールでは入力はpxのままでOK

remを選択すると、初期値では1rem = 16pxとして自動変換します。 サイト側で異なる基準値を使用している場合は「1rem」の数値を変更してください。

clamp()はfont-size以外にも使える

clamp()は文字サイズだけでなく、paddingやmargin、 gap、width、heightなどさまざまなCSSプロパティに使用できます。

プロパティ 使用例
font-size レスポンシブな文字サイズ
padding 画面幅に応じて変化する内側余白
margin セクション間などの余白調整
gap Flexbox・Gridの要素間隔
width 要素幅のレスポンシブ調整
height 要素の高さを画面幅に合わせて変化

clamp()を使うメリット

従来は画面幅ごとにメディアクエリを書いて調整していたサイズも、 clamp()を使えば1つの指定で滑らかに変化させることができます。

レスポンシブ調整をシンプルに

特に文字サイズやセクション余白など、 SPとPCの間も自然に変化させたい値にclamp()を使うと、 メディアクエリの記述を減らしやすくなります。

Web制作便利ツール一覧へ