2022.03.22(Tue)

max-font-size や min-font-size を設定する

こんにちは。

独立してから初めての確定申告も無事に終わり、気持ちよく新年度を迎えられそうです。

今日はレスポンシブコーディングにおけるフォントサイズのお話です。

要素の最大幅を設定する max-width のようにフォントサイズの最大値や最小値を設定したい時ってありますよね。

でもフォントサイズには max-font-size や min-font-size といったCSS のプロパティがありません。

そんな時に使えるのが min() 関数、max() 関数、clamp() 関数です。

フォントサイズの最大値を設定したい場合

min() 関数を使います。
min() はカンマで区切られた数値のリストから最小値を設定できます。

.letter {
　font-size: min(2.5vw, 50px);
}

上記の記述だと、「2.5vw」「50px」の小さい方が適用されるので、基本のフォントサイズは 2.5vw で、画面幅によってフォントサイズが可変しますが、50pxより大きくはなりません。

max() 関数を使います。
max() はカンマで区切られた数値のリストから最大値を設定できます。

.letter-2 {
　　font-size: max(2.5vw, 12px);
}

上記の記述だと、「2.5vw」「12px」の大きい方が適用されるので、基本のフォントサイズは 2.5vw で、画面幅によってフォントサイズが可変しますが、12pxより小さくはなりません。

clamp() 関数を使います。
clamp() は定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。

.letter-3 {
　　font-size: clamp(12px, 2.5vw, 50px);
}

上記の記述だと、「12px」と「50px」の間で「2.5vw」が適用されます。
基本のフォントサイズは 2.5vw で、画面幅によってフォントサイズが可変しますが、12pxより小さくはならず、50pxより大きくはなりません。

unquote関数と併用する必要があります。

.letter-4 {
　　font-size: unquote('min(2.5vw, 50px)');
}

便利ですね。

あまり多用することはないかもしれませんが、max-width を設定した要素の中のテキストなんかに使うと、文字がはみ出るといったことが防げるのでおすすめです。

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。