【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に最小・最大値を設定。その間をレスポンシブに可変させる方法について紹介しました。
以上で解説を終わります。
目次