画像であれば横幅を％指定するだけで画面幅に応じて自然に拡大・縮小できますが、文字サイズは同じようにはいきません。
vwを使って文字サイズをレスポンシブに調整する方法もありますが、最小値や最大値の設定が難しく、意図せず文字が大きくなりすぎたり小さくなりすぎたりすることがあります。
一方、clamp()関数を使えば、最小値・推奨値・最大値を指定できるため、画像のように自然なレスポンシブな拡大・縮小を文字サイズでも実現できます。
今回は、clamp()関数を使ってフォントサイズをレスポンシブに調整する方法について、解説していきます。
<h1>フォントサイズがウィンドウ幅375px時点では16px、767px時点では24pxとなり、その間は自動で滑らかに変化します。</h1>h1 {
font-size: clamp(16px, 8.347px + 2.041vw, 24px);
}clamp()関数の使い方
clamp()関数はCSSの関数です。
3つの引数を取り、1つ目に最小値、2つ目に推奨値、3つ目に最大値を指定します。
font-size: clamp(最小値, 推奨値, 最大値);このとき、推奨値が最小値と最大値の範囲内に収まる場合はその値が採用され、最小値より小さい場合は最小値が、最大値より大きい場合は最大値が適用されます。
そのため、以下のように最小値と最大値には静的な値、推奨値には動的な値や計算式を設定することで、柔軟なフォントサイズ調整が可能になります。
clamp()関数内では、calc()を使わずに加算・減算・乗算・除算をそのまま使用できます。
/*
375pxの場合：2.5vw = 375×0.025 = 9.375px → 最小値16pxが適用
575pxの場合：2.5vw = 575×0.025 = 14.375px → 最小値16pxが適用
767pxの場合：2.5vw = 767×0.025 = 19.175px → 推奨値19.175pxが適用
*/
font-size: clamp(16px, 2.5vw, 24px);
/*
375pxの場合：8.347px + (375 × 0.02041) = 8.347 + 7.65375 = 16.00075px → 推奨値16.00075pxが適用
575pxの場合：8.347px + (575 × 0.02041) = 8.347 + 11.73575 = 20.08275px → 推奨値20.08275pxが適用
767pxの場合：8.347px + (767 × 0.02041) = 8.347 + 15.65447 = 24.00147px → 最大値24pxが適用
*/
font-size: clamp(16px, 8.347px + 2.041vw, 24px);「font-size: clamp(16px, 8.347px + 2.041vw, 24px);」では、ウィンドウ幅375pxの場合は約16px、767pxの場合は約24pxとなり、その間の幅では値が滑らかに変化するよう適切に調整されています。
しかし、この値を自分で計算するのは骨が折れるため、実際には特定のウィンドウサイズ間で最小値と最大値を指定し、自然に変化するフォントサイズを簡単に算出できる「clamp関数ジェネレーター」と呼ばれるツールを使って適切な値を生成するのがおすすめです。
最適値はclamp関数ジェネレーターで簡単に生成可能
clamp関数ジェネレーターを使うことで、特定のウィンドウサイズ間で最小値と最大値を指定し、その間の幅では値が滑らかに変化するフォントサイズを簡単に算出できます。
今回は、ウィンドウ幅375pxのときは16px、1023pxのときは28pxとなり、その間の幅では滑らかに変化するような clamp関数の値を作成してみます。
なお、clamp関数ジェネレーターにはいくつかありますが、今回は以下のclamp関数ジェネレーターを使用してみます。
https://s1-tools.netlify.app/clamp
まずは、ビューポート最小値を375px、最大値を1023pxと設定します。
次に、ビューポート幅が375pxと1023pxの時点で、それぞれ望ましいフォントサイズを指定します。
また、デフォルトで単位が「rem」になっているため、「px」に変更します。
最後にResultsに生成されている値の中の単位が「rem」のままのため、「結果をpx単位で出力する」にチェックを入れて、pxに変換します。
あとは、生成された値を指定すればOKです。
<h1>フォントサイズがウィンドウ幅375px時点では16px、1023px時点では28pxとなり、その間は自動で滑らかに変化します。</h1>h1 {
font-size: clamp(16px, 9.056px + 1.852vw, 28px);
}まとめ
今回は、clamp()関数を使ってフォントサイズをウィンドウ幅に合わせて自然に拡大・縮小させる方法について解説しました。
これまで複数のブレイクポイントを用意し、それぞれに合わせてフォントサイズを個別に指定していた方は、ぜひclamp()関数を使ってみて下さい。
フォントサイズに限らず、marginやpaddingといった余白調整にも役に立ち、よりシンプルで柔軟なレスポンシブデザインを実現できるのでおすすめです。
今回は以上になります。最後までご覧頂き、ありがとうございました。
