CSSで画面幅に合わせてフォントサイズを可変する
更新日：2025年10月4日｜公開日：2025年10月4日
最近よくフォントサイズを画面幅に合わせて可変させる設定のサイトをよく見るようになりました。この仕組みを利用するとPCサイトなどで幅を狭めた時にグローバルメニューがぶつかることを回避できたり、メインビジュアルなどが丁度良いサイズ感を可変して保つことが出来るようになります。※ブレークポイントを細かく作れば良いんですけど面倒だったり可変するほうがスマートだなと感じます。
CSSの関数「clamp()関数」とは？
clamp()関数は、フォントサイズを指定された最小値と最大値の範囲内に収める（クランプする）ための関数です。もし値がその範囲内にある場合はそのままの値を返し、範囲外にある場合は最小値または最大値に置き換えて返します。簡単に言うと、値が特定の範囲からはみ出さないように制限する機能です。
clamp()関数を使う
以下のように、「最小値」「推奨値」「最大値」の3つの引数を指定します。
clamp(最小値, 推奨値, 最大値)たとえばPCの時にブレークポイントが768px~の時に最大値は36pxで最小値は16pxであとは良い感じで可変させたいとします。では推奨値はどうやって求めるのか？というと計算式は以下です。
最小値 ÷ 最小のフォントサイズで止める画面サイズ ✕ 100 = vwの値今回は768px~なので以下となります。
16 ÷ 768 ✕ 100 = 2vw最終的な設定は以下です。
clamp(16px, 2vw, 36px)推奨値を簡単に計算するツール
じゃあ単位がpxではなくremならどうすれば？とか毎回計算するのも面倒な場合は以下のツールを使えば簡単に推奨値を求められます。
SCSSで関数作ってもいいのかもしれませんがremの時どうするんだ？とか面倒なのでこれで計算しました。