Written by Kasumi

【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に最小・最大値を設定。その間をレスポンシブに可変させる方法について紹介しました。

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

目次

関連記事

HTMLCSS プログラミング

【簡単】iphone(ios)でinputタグをタップしたらズームされるのを回避する方法

2022.02.12
8663
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
12766
HTMLCSS プログラミング

【簡単】checkbox(チェックボックス)のデザインをカスタマイズする方法【CSS】

2022.02.20
30065
HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
2400