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

スマホを横向き・縦向きに切り替えた時だけ任意のCSSを実行する方法

2023.02.06
485
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
2500
HTMLCSS

CSSで要素が空かどうか判別。任意のスタイルを適用する方法

2023.04.16
232
HTMLCSS

CSSのhas擬似クラスを使って指定した要素の有無を判別する方法

2023.04.21
143