スマートフォンではちょうどよい文字サイズなのに、パソコンで見ると少し小さい。
反対に、パソコンに合わせて文字を大きくすると、スマートフォンでは見出しが途中で折り返されてしまう。
画面幅に合わせて文字サイズを変えたいときに使えるのが、CSSのclamp()関数です。
clamp()を使うと、文字サイズの最小値と最大値を決めたうえで、その間の大きさを画面幅に合わせて変えられます。
この記事では、clamp()に指定する3つの値と、文字サイズが変わる仕組みを初心者向けに解説します。
CSSのclamp()関数とは
clamp()は、最小値と最大値の間でサイズを調整できるCSSの関数です。
たとえば、次のような文字サイズを作れます。
- スマートフォンなど画面が狭いときは、文字を16pxにする
- 画面が広くなるにつれて、文字も少しずつ大きくする
- パソコンなど画面が広いときは、24pxより大きくしない
これまで画面幅ごとに文字サイズを切り替えていた場面でも、clamp()なら1行で指定できます。
.title {
font-size: clamp(16px, 2vw, 24px);
}
このコードでは、文字サイズが16pxより小さくならず、24pxより大きくなりません。
その間では、画面幅をもとに文字サイズが変わります。
clamp()関数の書き方
clamp()では、3つの値をカンマで区切って指定します。
font-size: clamp(最小値, 推奨値, 最大値);
左から順番に、最小値、推奨値、最大値です。
先ほどのコードも、3つに分けて見ると役割が分かりやすくなります。
font-size: clamp(16px, 2vw, 24px);
16px：最小値2vw：推奨値24px：最大値
【図1】clamp(16px, 2vw, 24px)を3色に分け、16pxは「これより小さくしない」、2vwは「画面幅に合わせて変わる」、24pxは「これより大きくしない」と表示する。
最小値
1つ目の値は、これ以上小さくしたくないサイズです。
font-size: clamp(16px, 2vw, 24px);
この例では16pxが最小値です。
推奨値から計算された文字サイズが16pxより小さくなっても、実際には16pxで表示されます。
画面の狭いスマートフォンで、文字が小さくなりすぎるのを防ぐ役割があります。
推奨値
2つ目は、画面幅に合わせて変化させるための値です。
font-size: clamp(16px, 2vw, 24px);
この例では2vwが推奨値です。
vwは画面幅をもとにサイズを決めるCSSの単位です。1vwは画面幅の1％を表すため、画面が広くなると値も大きくなります。
ただし、推奨値がいつでもそのまま使われるわけではありません。
計算結果が最小値より小さければ最小値が使われ、最大値より大きければ最大値が使われます。
「推奨値」という名前ですが、実際には最小値と最大値の間でサイズを変化させる部分と考えると分かりやすいでしょう。
最大値
3つ目の値は、これ以上大きくしたくないサイズです。
font-size: clamp(16px, 2vw, 24px);
この例では24pxが最大値です。
画面がどれだけ広くなっても、文字サイズは24pxより大きくなりません。
大きなディスプレイで文字が必要以上に大きくなり、デザインが崩れるのを防げます。
clamp()で文字サイズが変わる仕組み
clamp(16px, 2vw, 24px)を指定した場合、ブラウザは最初に2vwの大きさを確認します。
その結果に応じて、実際に使う文字サイズが次のように決まります。
2vwが16pxより小さい：16pxで表示2vwが16pxから24pxの間：2vwの大きさで表示2vwが24pxより大きい：24pxで表示
【図2】左から「狭い画面」「中間の画面」「広い画面」の3つを並べる。狭い画面では16pxで止まり、中間では16pxから24pxへ変化し、広い画面では24pxで止まる様子を矢印と文字サイズの違いで表す。
つまり、画面が広くなるほど文字が際限なく大きくなるわけではありません。
最小値と最大値で上下を挟み、その間だけ推奨値を使って変化させるのがclamp()の仕組みです。
clamp()をfont-sizeで使ってみよう
見出しの文字サイズを、画面幅に合わせて変える例を見てみましょう。
HTMLは次のとおりです。
<h1 class="page-title">犬と猫のプロフィール</h1>
CSSでfont-sizeにclamp()を指定します。
.page-title {
font-size: clamp(24px, 4vw, 40px);
}
この場合、見出しの文字サイズは次のように動きます。
- 小さい画面では24pxより小さくならない
- 中間の画面では
4vwをもとに変化する - 大きい画面では40pxより大きくならない
CSSに指定するのは1行だけです。
画面幅ごとにいくつも文字サイズを用意しなくても、スマートフォンからパソコンまで自然に変化させられます。
clamp()とメディアクエリの違い
画面幅によってCSSを変える方法には、メディアクエリもあります。
メディアクエリを使った場合は、指定した画面幅を境に文字サイズが切り替わります。
.page-title {
font-size: 24px;
}
@media (min-width: 768px) {
.page-title {
font-size: 40px;
}
}
この例では、画面幅が768px未満なら24px、768px以上なら40pxです。
一方、clamp()は最小値と最大値の間をなめらかに変化させられます。
.page-title {
font-size: clamp(24px, 4vw, 40px);
}
どちらか一方だけを使わなければならないわけではありません。
文字サイズや余白を少しずつ変えたいときはclamp()、レイアウトや表示内容を特定の画面幅で切り替えたいときはメディアクエリというように、目的に合わせて使い分けます。
clamp()の推奨値はどうやって決める？
ここまでの例では、推奨値に2vwや4vwを指定しました。
簡単な指定ならこれでも使えますが、「画面幅375pxのときは16px、1200pxのときは24px」のように条件を細かく決める場合は計算が必要です。
推奨値には、次のようにpxとvwを組み合わせた値が入ることもあります。
font-size: clamp(16px, calc(12.36px + 0.97vw), 24px);
数字が増えると、急に難しそうに見えますよね。
この計算を毎回手作業で行う必要はありません。
最小と最大の文字サイズ、変化を始める画面幅、変化を終える画面幅を入力するだけでCSSを作れる自動計算ツールを用意しています。
まずはジェネレーターでCSSを作り、出力された3つの値をこの記事と見比べてみると、clamp()の仕組みをつかみやすくなります。
clamp()は文字サイズ以外にも使える
clamp()は、font-sizeだけの機能ではありません。
サイズを指定できるCSSプロパティであれば、横幅や余白などにも使えます。
.box {
width: clamp(280px, 80vw, 960px);
padding: clamp(16px, 4vw, 40px);
}
この例では、要素の横幅と内側の余白が画面幅に合わせて変化します。
ただし、最初からいろいろな場所へ使うと、どの値が原因でサイズが変わったのか分かりにくくなります。
初めて使う場合は、まず見出しのfont-sizeなど、変化を確認しやすい場所から試してみるのがおすすめです。
px、rem、em、vwの違いが分からない場合は、CSSの単位と変換方法を次の記事で確認できます。
clamp()関数は現在のブラウザで使える？
clamp()は、現在使われている主要なブラウザに対応しています。
パソコンのChromeやEdge、Firefox、Safariだけでなく、スマートフォン向けのブラウザでも利用できます。
Internet Explorerには対応していませんが、Internet Explorer自体のサポートはすでに終了しています。
特別に古い環境への対応が必要な場合を除き、現在のWebサイトでは使いやすいCSS機能です。
まとめ
clamp()関数を使うと、最小値と最大値を決めたうえで、画面幅に合わせて文字サイズを変えられます。
書き方は次のとおりです。
font-size: clamp(最小値, 推奨値, 最大値);
3つの値には、それぞれ次の役割があります。
- 最小値：これ以上小さくしない
- 推奨値：画面幅などをもとにサイズを変える
- 最大値：これ以上大きくしない
最初から計算式をすべて理解しようとすると、少し難しく感じるかもしれません。
まずは自動計算ツールでCSSを作り、最小値、推奨値、最大値がどこに入っているか確認するところから始めてみてください。
