CSS clamp()ジェネレーター

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

1. ビューポート幅の範囲を入力する

「最小ビューポート幅」と「最大ビューポート幅」に、サイズを変化させる画面幅の範囲をpx単位で入力します。

たとえば最小を375px、最大を1440pxにすると、画面幅が375pxから1440pxまで変化する間に、指定したサイズが滑らかに変わります。

2. 最小幅時と最大幅時の値を入力する

「最小幅時の値」には最小ビューポート幅で適用したいサイズ、「最大幅時の値」には最大ビューポート幅で適用したいサイズを入力します。入力値の単位はpxです。

2つの値を同じにした場合は、clamp()ではなく固定値が生成されます。

3. 出力単位を選択する

「出力単位」からremまたはpxを選択します。

remを選択した場合は、「ルートフォントサイズ」にプロジェクトのhtml要素へ設定しているfont-sizeを入力します。通常は初期値の16pxを使用できます。

最小幅時・最大幅時の値は、指定したルートフォントサイズをもとにremへ換算されます。

4. プレビューで変化を確認する

「プレビュータイプ」でfont-sizeまたはwidthを選ぶと、生成した値を文字サイズまたは要素の横幅として確認できます。

「プレビューの画面幅」へ数値を入力するか、375・390・768・1024・1440・1920のクイック選択ボタンを使用して、確認したい画面幅へ切り替えます。プレビュー右側のハンドルを左右にドラッグして調整することもできます。

プレビュー上部には、現在のfont-sizeまたはwidthがpx (rem)の形式で表示されます。

「詳細設定」を開くと、font-sizeではプレビューするテキスト、widthではプレビュー要素の高さを変更できます。テキストエリアに入力した改行もプレビューへ反映されます。

5. 生成された値をコピーする

入力内容に合わせてclamp()の値が自動生成され、「使用例」には選択中のプレビュータイプをプロパティとして使ったCSSが表示されます。

「コピーする」ボタンで生成された値をコピーし、使用したいCSSプロパティへ貼り付けてください。

すべての設定を最初の状態に戻す場合は、「リセット」ボタンを使用します。

clamp()とは？

clamp()は、最小値・推奨値・最大値の3つを指定し、値を一定の範囲内に収めるCSS関数です。画面幅に応じて文字サイズや要素サイズを滑らかに変化させたい場合に利用できます。

clamp(最小値, 推奨値, 最大値)

• 最小値：これ以上小さくしない値
• 推奨値：画面幅などに応じて変化する値
• 最大値：これ以上大きくしない値

たとえば、次の指定では文字サイズが1remから2remの範囲で変化します。

font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);

推奨値に含まれるvwはビューポート幅に応じて変化します。計算結果が最小値より小さい場合は最小値、最大値より大きい場合は最大値が適用されます。

このジェネレーターの初期設定では、ビューポート幅が375pxのときに16px、1440pxのときに32pxとなる推奨値を自動計算しています。

clamp()を利用できるプロパティ

clamp()は、数値や長さを受け取るさまざまなCSSプロパティで利用できます。

• font-size：画面幅に応じた文字サイズ
• width・max-width：要素やコンテンツの横幅
• padding・margin・gap：余白や要素間の間隔
• top・leftなど：配置位置

メディアクエリで段階的に値を切り替える方法と異なり、指定した範囲内で連続的に値を変化させられるのが特徴です。

FAQ