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 WordPress プログラミング

wordpressのメディアから任意の画像ファイルを素早く呼び出す方法【簡単】

2021.12.23
290
HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
2256
HTMLCSS プログラミング

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

2022.03.12
3606
HTMLCSS

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

更新日:2019.11.28
1667