【CSS】clamp関数でフォントサイズを自在に調整しよう！

あっ…画面幅が小さくなったときに文字が大きすぎるな～

もう1つCSSのブレイクポイントを追加しよう！

う～ん、さらに追加しないとダメかな…？

おやおや、ブレイクポイントが沢山必要になってしまっていますね

そんな時に使えるCSSの便利な関数があります！

clamp関数とは？

clamp関数は、CSSでサイズや値を指定する際に、指定した値（推奨値）が特定の最小値と最大値の範囲内に収まるよう制限できる便利な関数です。この関数は3つの値を取ります。最小値 (min)、 推奨値 (preferred)、 最大値 (max) の順に記述し、clamp(最小値, 推奨値, 最大値) のように使用します。

仕組み

clamp関数の仕組みは、指定した推奨値を適用しつつ、それが最小値より小さくなり過ぎたり、最大値を超えたりしないように制御できるというものです。推奨値が最小値から最大値の間にあればその値を適用し、範囲を超える場合は最小または最大の制限値を適用します。例えば、font-size: clamp(16px, 3vw, 30px); のように指定すると、ブラウザの幅に応じてフォントサイズが調整され、16px未満に小さくならず、30px以上にも大きくならないように固定され、その間で3vwで文字が表示されます。

単位vwとは？

単位 vwは「ビューポート幅（viewport width）」の略で、画面の幅に対する割合でサイズが変わります。1vwは「ビューポート幅の1%」に相当します。ビューポートとは、私たちがブラウザで見ている「表示領域（ブラウザの幅）」のことで、デバイスや画面サイズによって異なります。このため、vwを使うと、デバイスの幅に応じたサイズでレイアウトや文字サイズを柔軟に調整できます。

まとめると

まず、最小値・推奨値・最大値を決めます。まず原則として「推奨値」が適用されます。しかし、その「推奨値」が「最大値」よりも大きくなっている場合は「最大値」が適用されます。同様に、「推奨値」が「最小値」よりも小さくなっている場合は「最小値」が適用されます。

注意点

推奨値は「固定値NG」

推奨値は、「変動する値」であることが求められます。先ほど例として挙げた「vw」は主にブラウザ幅の何％か、という値でした。故に、ブラウザ幅が1920pxから1000pxに変化すれば、10vw（ブラウザ幅の10％）は、192pxから100pxへと変化することになります。これは、推奨値として使用できます。

ただし、推奨値を固定値の「200px」のように指定してしまうと、値が変化しないために最大値や最小値の意味がなくなってしまいます。clamp関数を設定したのに効かない…というときに原因の一端となることがあるので、気をつけましょう。