BLOG

ブログ

  • Web制作

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より大きくはなりません。

scssでmin()とmax()を使用する場合

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

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

まとめ

便利ですね。

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