CSSでフォントサイズを動的に調整！max-font-size、min-font-sizeの設定方法

ウェブデザインでは、文字の読みやすさがユーザー体験を大きく左右します。特にレスポンシブデザインでは、デバイスの画面サイズに合わせてフォントサイズを柔軟に調整することが求められます。

しかし、フォントサイズには max-font-size や min-font-size といったCSSのプロパティがありません。
そんなときに役立つのが、CSSのclamp(), min(), max()関数です。これらの関数を使えば、フォントサイズの最小値・最大値を簡単に指定でき、画面幅に応じた文字サイズを自動で調整できます。

この記事では、以下の内容を詳しく解説します。

• レスポンシブなフォントサイズを設定する方法
• clamp()関数の基本的な使い方と実例
• 柔軟な設定が可能なmin() / max()関数の活用方法
• 各関数を使い分けるための実用的なアドバイス

CSSでフォントサイズの最大値・最小値を指定する方法とは？

画面サイズが異なるデバイスに対応するには、フォントサイズを柔軟に設定することが不可欠です。CSSでは、次の3つの関数を使うことで、フォントサイズを動的に制御できます。

• clamp()関数：最小値・推奨値・最大値を指定する。
• min()関数：複数の値から小さい方の値を表示します（＝最大値が設定される）。
• max()関数：複数の値から大きい方の値を表示します（＝最小値が設定される）。

以下で、それぞれの具体的な使い方と実例を詳しく解説します。

clamp()関数で最大値・最小値を設定する

clamp()関数は、フォントサイズを以下のように制御します。

• 最小値：フォントサイズの下限値（これ以上小さくならない）。
• 推奨値：通常時のフォントサイズ（画面幅に応じて変化）。
• 最大値：フォントサイズの上限値（これ以上大きくならない）。

基本構文

font-size: clamp(最小値, 推奨値, 最大値);

使用例

以下のコードでは、フォントサイズが16px～24pxの間で、画面幅に応じて変化します。

 p { font-size: clamp(16px, 2vw, 24px); } 

このコードの動作は以下の通りです。

• 画面幅が小さい場合：フォントサイズは16px。
• 画面幅が広い場合：フォントサイズは24px。
• 中間の画面幅では、`2vw` に基づいてサイズが調整される。

clamp()を使うメリット

• 最小値と最大値を明確に指定できる。
• デバイスの画面サイズに応じたフォントサイズの動的な変化が可能。
• コードが簡潔で読みやすい。

min()関数で最小値を設定する

min()関数は、複数の値を比較して最小値を選択する関数です。
例えば、フォントサイズを「画面幅の2%」または「20px」のどちらか小さい方に制限したい場合、次のように記述します。

基本構文

font-size: min(値1, 値2, ...);

使用例

 p { font-size: min(2vw, 20px); } 

このコードの動作は以下の通りです。

• 画面幅が狭い場合：`2vw` が `20px` より小さくなるので、`2vw` が採用される。
• 画面幅が広い場合：`20px` が `2vw` より小さいので、`20px` が採用される。

max()関数で最大値を設定する

max()関数は、複数の値を比較して最大値を選択する関数です。
例えば、フォントサイズを「画面幅の1%」または「12px」のうち大きい方に制限したい場合、次のように記述します。

基本構文

font-size: max(値1, 値2, ...);

使用例

 p { font-size: max(1vw, 12px); } 

このコードの動作は以下の通りです。

• 画面幅が狭い場合：`12px` が `1vw` より大きくなるので、`12px` が採用される。
• 画面幅が広い場合：`1vw` が `12px` より大きいので、`1vw` が採用される。

clamp(), min(), max()の応用例

次のコード例では、複雑な条件を設定してフォントサイズを調整しています。

使用例：条件を組み合わせる

• 最小値：16px
• 最大値：24px
• 推奨値：画面幅の3%

 p { font-size: clamp(16px, 3vw, 24px); } 

また、min() と max() を組み合わせてより柔軟に指定することも可能です。

 /* 最大24pxで、画面幅の2%以下にならない */ 
p { font-size: min(24px, max(2vw, 16px)); } 

このコードの動作は以下の通りです。

• フォントサイズが16px以下にはならない。
• フォントサイズが24px以上にはならない。
• 通常は`2vw`に基づいてサイズが変化する。

clamp(), min(), max()の違いと選び方

用途に応じて、clamp()関数とmin(), max()関数を使い分けましょう。

clamp()	min() / max()
最小値・推奨値・最大値を同時に指定できる。	単純に最小値または最大値だけを制御したい場合に適している。
コードが簡潔で、複数の条件を一度に記述可能。	他のプロパティ（幅や高さなど）にも柔軟に使える。

• 柔軟なフォントサイズの調整にはclamp()関数が最適。
• 特定の条件で単純な調整が必要な場合はmin() / max()関数を活用。

まとめ

CSSのclamp(), min(), max()関数を使うことで、レスポンシブデザインでのフォントサイズ調整が簡単になります。これらの関数を適切に活用すれば、ユーザー体験を向上させる美しいデザインが実現できます！