【CSS】font-sizeに最小・最大値を設定。その間をレスポンシブに可変させる方法

CSSのfont-size（フォントサイズ）に最小・最大値を設定。

最小・最大値の間を、デバイス幅によってレスポンシブに可変させたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

clamp関数を使ってfont-sizeを可変させる

.txt {
    font-size: clamp(12px, 2vw, 30px);
}

フォントサイズに最小・最大値を設定。その間をレスポンシブに可変させるCSSコード例です。

font-sizeにclamp関数を指定します。

clamp関数の使い方は以下の通りです。

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

第一引数に最小値。

第二引数に推奨値（デバイス幅によってレスポンシブに可変させる値）。

第三引数に最大値を設定します。

推奨値にはvw（ビューポート）を設定するとデバイス幅によって可変してくれます。

vwはデバイス幅に対して1/100pxで表示されます。

例として1vwを指定。デバイス幅が1000pxであれば10pxで表示されます。

clamp関数を使えば、設定した最小値以下・最大値以上にならず、その間でvwにそってfont-sizeを可変してくれるようになります。

CSSでfont-sizeに最小・最大値を設定。その間をレスポンシブに可変させる方法について紹介しました。

以上で解説を終わります。