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だけで自動横スクロールするアニメーションを実装する方法

2022.07.15
2787
HTMLCSS

【コピペ用】ハンバーガーメニューをCSSのみで実装する方法

2022.06.05
7022
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
2199
HTMLCSS プログラミング

【CSS】input要素のplaceholderの文字だけサイズを変更する方法

2022.01.10
8737