clamp() を使うと「画面幅に応じて自然に伸び縮みするフォントサイズ」が作れる
しかも、最小値・理想値・最大値を 1 行でコントロールできるので、
レスポンシブタイポグラフィの“最強ツール”と言っていい存在です。
ここでは、初心者でも迷わないように
CSS と Tailwind CSS の両方で、例題を交えて丁寧に解説します。
clamp() の基本構造をまず理解する
clamp の書き方
clamp(最小値, 理想値, 最大値)
意味はこうです。
- 最小値より小さくならない
- 最大値より大きくならない
- その間は「理想値」に従って伸び縮みする
理想値には vw（画面幅に応じて変わる単位）を使うのが定番です。
例1：最小 16px、最大 32px、画面幅に応じて可変
CSS 版
h1 {
font-size: clamp(1rem, 5vw, 2rem);
}
意味をかみ砕くとこうなります。
- 最小：1rem（16px）
- 理想：5vw（画面幅の 5%）
- 最大：2rem（32px）
スマホでは小さく、
タブレットでは少し大きく、
PC では最大値に近づく、
という“自然な伸び方”になります。
Tailwind 版（任意値を使う）
<h1 class="text-[clamp(1rem,5vw,2rem)] font-bold">
可変フォントの見出し
</h1>
Tailwind は clamp の専用クラスがないため、text-[...] の任意値でそのまま書きます。
clamp の「理想値」に vw を使う理由（ここが重要）
vw（viewport width）は画面幅に比例する単位です。
- 100vw = 画面幅いっぱい
- 10vw = 画面幅の 10%
つまり、vw を使うと
画面が広いほどフォントが大きくなる
という自然な動きを作れます。
ただし、vw だけだとスマホで文字が小さすぎたり、
PC で巨大になりすぎたりするため、
clamp で「最小値」と「最大値」を決めてあげるのがベストです。
例2：本文テキストを「読みやすい範囲」で可変にする
CSS 版
p {
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
line-height: 1.7;
}
スマホでは 0.9rem（14.4px）
PC では 1.1rem（17.6px）
その間は 1.2vw に従って自然に変化します。
深掘りポイント
本文は「大きすぎても小さすぎても読みにくい」ので、
clamp で“安全な範囲”に収めるのが最適です。
Tailwind 版
<p class="text-[clamp(0.9rem,1.2vw,1.1rem)] leading-relaxed">
可変フォントで読みやすい本文テキストです。
</p>
例3：ヒーローセクションの大見出しをダイナミックに可変
CSS 版
.hero-title {
font-size: clamp(2rem, 8vw, 4rem);
font-weight: 700;
}
スマホ：2rem（32px）
PC：4rem（64px）
その間は 8vw に従って伸びるので、
“画面に合わせて迫力が変わる”見出しになります。
Tailwind 版
<h1 class="font-bold text-[clamp(2rem,8vw,4rem)]">
ダイナミックなヒーロー見出し
</h1>
例4：ボタンの padding を clamp で可変にする（応用）
フォントだけでなく、余白にも clamp は使えます。
CSS 版
.button {
padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
font-size: clamp(0.9rem, 1vw, 1.1rem);
}
画面が広いほどボタンが“ゆったり”し、
スマホではコンパクトになります。
Tailwind 版
<button
class="text-[clamp(0.9rem,1vw,1.1rem)]
px-[clamp(1rem,2vw,2rem)]
py-[clamp(0.5rem,1vw,1rem)]
bg-blue-600 text-white rounded">
可変ボタン
</button>
clamp を設計するときの考え方（ここが一番大事）
1. 最小値は「スマホで読めるサイズ」
- 見出し：1.5〜2rem
- 本文：0.9〜1rem
- 小さすぎると読みづらいので、ここは慎重に決める
2. 最大値は「PC で大きすぎないサイズ」
- 見出し：3〜4rem
- 本文：1.1〜1.2rem
- 画面が広くても“巨大化しすぎない”ようにする
3. 理想値（真ん中）は vw を使う
- 3vw〜8vw がよく使われる
- 大きい見出しほど vw を大きくする
- 本文は 1vw 前後で十分
4. clamp は「デザインの揺れ幅」を決める道具
clamp の本質は
「どこまで変わっていいか」
を決めることです。
- 最小値 → これ以下はダメ
- 最大値 → これ以上もダメ
- 理想値 → この範囲で自由に伸び縮みしてOK
この“許容範囲”を決めるのが、タイポグラフィ設計の肝です。
実務テンプレート：レスポンシブタイポグラフィセット
CSS 版
:root {
--fs-body: clamp(0.95rem, 1vw, 1.1rem);
--fs-h2: clamp(1.5rem, 3vw, 2.5rem);
--fs-h1: clamp(2rem, 6vw, 4rem);
}
body {
font-size: var(--fs-body);
}
h2 {
font-size: var(--fs-h2);
}
h1 {
font-size: var(--fs-h1);
}
Tailwind 版
<h1 class="text-[clamp(2rem,6vw,4rem)] font-bold">
見出し1
</h1>
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-semibold">
見出し2
</h2>
<p class="text-[clamp(0.95rem,1vw,1.1rem)] leading-relaxed">
本文テキスト
</p>
まとめ
clamp() は、
最小値・理想値・最大値を 1 行でコントロールできる可変フォントの最強ツール です。
ポイントは次の通りです。
- rem と vw を組み合わせると自然な伸び縮みになる
- 最小値と最大値で“安全な範囲”を決める
- Tailwind では text-[clamp(…)] を使う
- 見出し・本文・ボタンなど、あらゆる UI に応用できる
