【CSS】clamp()関数ジェネレーター｜文字サイズの自動計算ツール

スマートフォンでは読みやすい大きさにして、パソコンでは少し大きく表示したい。

このようなときに便利なのが、CSSのclamp()関数です。

clamp()関数を使うと、画面幅に合わせて文字サイズを少しずつ変化させられます。ただし、思いどおりの画面幅と文字サイズを指定するには計算が必要です。

「数式はよく分からないけれど、clamp()を使ってみたい……」

そのような方でも簡単に使えるように、数値を入力するだけでCSSを作成できるジェネレーターを用意しました。

この記事では、clamp()関数ジェネレーターの使い方と、作成されたCSSの意味を初心者向けに紹介します。

CSS clamp()関数ジェネレーター

以下のジェネレーターへ、最小・最大の文字サイズと画面幅を入力してください。

入力した内容に合わせて、font-sizeへ貼り付けられるCSSを自動で作成します。最初から数値が入力されているため、そのまま動かして試すこともできます。

4つの数字を入れるだけで、画面幅に合わせてなめらかに変わる文字サイズを作れます。

上下の矢印キーを使用してメタボックスパネルのサイズを変更します。

font-size: clamp(16px, 5.091px + 2.909vw, 40px);

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

ジェネレーターでは、文字サイズと画面幅をそれぞれ2つずつ入力します。

難しそうに見えるかもしれませんが、入力するのは合計4項目です。ここからは、各項目の意味と操作方法を順番に説明します。

最小と最大の文字サイズを入力する

はじめに、表示したい文字の最小サイズと最大サイズを入力します。

• 最小の文字サイズ：スマートフォンなど、画面が狭いときの文字サイズ
• 最大の文字サイズ：パソコンなど、画面が広いときの文字サイズ

たとえば、スマートフォンでは16px、パソコンでは24pxで表示したい場合は、最小の文字サイズへ「16」、最大の文字サイズへ「24」と入力します。

途中の画面幅では、16pxから24pxまでの間で文字サイズが少しずつ変化します。

px・rem・vwなど、CSSで使われる単位の違いを確認したい方は、以下の記事も参考にしてください。

【CSS】px・rem・em・vw変換ツール｜計算方法と単位の違い

px・rem・em・vwを簡単に変換できる無料の計算ツールです。CSSで使う各単位の違いや計算方法、基準となる数値についても初心者向けに分かりやすく解説します。

it-memo.work

2023.08.13

文字サイズが変化する画面幅を入力する

次に、文字サイズの変化を始める画面幅と、変化を終える画面幅を入力します。

• 変化を始める画面幅：この幅以下では、最小の文字サイズを使用する
• 変化を終える画面幅：この幅以上では、最大の文字サイズを使用する

画面幅とは、Webページを表示しているブラウザの横幅です。

変化を始める画面幅から終える画面幅までの間は、画面が広くなるにつれて文字も少しずつ大きくなります。

変化を始める画面幅より狭くなっても、設定した最小サイズより文字が小さくなることはありません。反対に、変化を終える画面幅より広くなっても、最大サイズを超えて大きくなることはありません。

プレビューで文字サイズを確認する

数値を入力したら、プレビューで実際の文字サイズを確認します。

画面幅のスライダーを左右へ動かすと、画面の広さに合わせて文字サイズがどのように変化するか確認できます。

数値だけでは完成後の見た目を想像しにくい方も、プレビューを見ながら調整すれば安心です。

文字が小さいと感じた場合は最小サイズを大きくし、大きすぎる場合は最大サイズを小さくしてみましょう。

作成されたCSSをコピーする

入力内容に問題がなければ、作成されたCSSをコピーボタンでコピーします。

コピーしたCSSは、文字サイズを変更したい要素へ貼り付けて使用できます。

.title {
  font-size: clamp(16px, calc(13.18px + 0.75vw), 24px);
}

中央のcalc()には、入力した文字サイズと画面幅から計算された数値が入ります。自分で計算し直す必要はありません。

CSSのclamp()関数とは？

clamp()は、最小値・画面幅に合わせて変化する値・最大値の3つをまとめて指定できるCSSの関数です。

基本的な書き方は次のとおりです。

font-size: clamp(最小値, 変化する値, 最大値);

たとえば、次のCSSでは文字サイズが16pxより小さくならず、24pxより大きくなりません。

.title {
  font-size: clamp(16px, 4vw, 24px);
}

画面幅に対して4vwが16pxより小さくなる場合は、最小値の16pxが使用されます。4vwが24pxより大きくなる場合は、最大値の24pxが使用されます。

ただし、このように中央を4vwだけで指定すると、希望した画面幅で最小・最大サイズにならないことがあります。

本記事のジェネレーターでは、入力した2つの画面幅で希望した文字サイズになるように中央の値を計算します。

clamp()関数の仕様では、中央の値が最小値を下回る場合は最小値、最大値を上回る場合は最大値が使用されます。

clamp()関数の3つの値や、画面幅によって文字サイズが変わる仕組みを知りたい方は、初心者向けにclamp関数について解説した以下の記事を参考にしてください。

【CSS初心者向け】clamp()関数とは？3つの値と文字サイズの変わり方を図解

CSSのclamp()関数とは何か、初心者向けに解説します。最小値・推奨値・最大値の役割や、画面幅に合わせて文字サイズが変わる仕組み、font-sizeでの使い方が図で分かります。

it-memo.work

2026.08.06

clamp()関数を使うメリット

画面幅に応じて文字サイズを変更する方法として、メディアクエリを使う方法もあります。

.title {
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  .title {
    font-size: 24px;
  }
}

この書き方では、画面幅が768pxになったところで、文字サイズが16pxから24pxへ切り替わります。

一方、clamp()関数を使うと、指定した画面幅の間で文字サイズを少しずつ変えられます。

.title {
  font-size: clamp(16px, calc(13.18px + 0.75vw), 24px);
}

急に大きさが切り替わらないため、スマートフォン、タブレット、パソコンなど、さまざまな画面幅に合わせやすくなります。

また、最小と最大のサイズを決められるため、画面が狭いときに文字が小さくなりすぎたり、広いときに大きくなりすぎたりすることも防げます。

ジェネレーターを使うときの注意点

最小の文字サイズには、最大の文字サイズより小さい値を入力します。

同じように、変化を始める画面幅には、変化を終える画面幅より小さい値を入力してください。入力内容に問題がある場合は、ジェネレーター内に確認する場所が表示されます。

また、ジェネレーターが作成するのは文字サイズ用のCSSです。コピーしたCSSは、文字サイズを変更したい要素の中へ貼り付けます。

.title {
  font-size: clamp(16px, calc(13.18px + 0.75vw), 24px);
}

完成後は、パソコンだけでなくスマートフォンでも表示を確認しましょう。文章の長さや使用しているフォントによっては、同じ文字サイズでも見え方が異なる場合があります。

まとめ

CSSのclamp()関数を使うと、画面幅に合わせて文字サイズを少しずつ変化させられます。

ただし、希望した画面幅で最小・最大サイズにするには計算が必要です。

本記事のジェネレーターなら、次の4項目を入力するだけでCSSを作成できます。

• 最小の文字サイズ
• 最大の文字サイズ
• 変化を始める画面幅
• 変化を終える画面幅

画面幅のスライダーを動かせば、作成した文字サイズの変化もその場で確認できます。

難しい計算はジェネレーターに任せて、作成されたCSSをWebサイト制作に活用してみてください。