CSSのclamp()で文字サイズを可変にする：最小・推奨・最大の決め方

スマホでは小さく、PCでは大きく。見出しのサイズを自然に変えたいこと、あるよねー。今回はclamp()で、サイズの上限と下限を決めてみよう。

図：ルート16pxの仮定。推奨値を24〜48pxの範囲に収める。

結論：最小値と最大値の間で、文字サイズを変化させる

見出しをスマートフォンでは小さく、広い画面では大きくしたいとき、clamp()でサイズの範囲を指定できるよ。次の例は最小1.5rem、最大3remとし、その間では画面幅を含む式を使います。

.page-title {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

これは出発点となる作例です。見出しの長さや書体に合わせて調整してね。

3つの値は何を表す？

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

この例では、推奨値が1rem + 2vwです。画面幅だけで決まる値にせず、文字サイズに関係するremも組み合わせています。最小値を最大値より大きくするような指定は避け、意図が読み取れる値にします。

数値で確かめる

ルート文字サイズを16pxと仮定すると、1.5remは24px、3remは48pxです。推奨値の計算結果をこの範囲に収めると、次の値になります。

計算表は16pxという前提での値です。ユーザーの文字サイズ設定などにより、同じ画面幅でも結果は変わるよ。

実装後に見るのはサイズ以外も

画面幅を変えて、実際のタイトルが何行になるかを見ます。短い英語見出しだけで確認すると、長い日本語タイトルで窮屈になる問題を見落としやすくなります。

• 320px前後の画面で横にはみ出さないか。
• 長いURLや英単語が折り返されるか。
• ブラウザのズームや文字サイズ変更でも読めるか。
• 行間や上下の余白が、最大サイズのときも十分か。

remを混ぜた式を使うだけで、アクセシビリティの確認が完了するわけではありません。実際のブラウザで拡大し、文字の切れや重なりを確認します。

メディアクエリと使い分ける

文字の大きさを連続的に変える用途ではclamp()が便利です。一方、2列から1列へ変えるなど、レイアウト自体を切り替える処理はメディアクエリで分けると意図を整理できるよ。

画面幅を変えて、式を試してみよう

制作の実験室：文字サイズで、仮定する画面幅とルート文字サイズを変えられるよ。計算結果と、実際のCSSを使ったサンプルを別々に用意した。シミュレーションのスライダーはブラウザ自体の画面幅を変えるものではないので、実際のCSS表示はウィンドウサイズを変えて確かめてね。

境界は、推奨値が最小値と一致するところ、最大値と一致するところ。ルート16pxなら、それぞれ画面幅400px、1600pxになるよ。この前後で値が急に飛ばず、上限と下限に収まるかを確認してみよう。