max-font-sizeやmin-font-sizeを指定したい時はこう！

※この記事は2021年1月20日時点での情報になります。

widthにはmax-widthとmin-widthが用意されており、レスポンシブサイトで横幅を○○px以上●●px以下みたいなことを実現できます。

しかしfont-sizeなどでそれを実現したい時にmax-font-sizeやmin-font-sizeは用意されておりません。

marginなども同様でmax-marginもmin-marginも用意されていません。
font-sizeやmarginでそれを実現するのは不可能なのでしょうか？

いいえ。代わりにmin()やmax()を使うことで実現可能です。

Contents

①min関数

例えば最大30pxの文字を作成したい(max-font-sizeを指定したい)時はmin関数を使用して以下のように書きます。

<p class="responsive-letter01">この文字は最大30px</p>
<style>
.responsive-letter01{
	font-size:min(2.3vw,30px);
}
</style>

基本フォントサイズを2.3vwに指定しているので
ウインドウ幅を拡げたり狭めたりすると文字が大きくなったり小さくなったりします。
最大サイズに30pxをしていしているので30px以上にはなりません。

min()は min(基本サイズ,最大サイズ)という形で値を設定します。

(PCの方はウィンドウサイズを変えてみると下記の文字で動きを確認できます。)

この文字は最大30px

次に最小16pxの文字を作成したい(min-font-sizeを指定したい)時はmax関数を使用して以下のように書きます。

<p class="responsive-letter02">最小18px</p>
<style>
.responsive-letter02{
	font-size:max(2.3vw,18px);
}
</style>

基本フォントサイズを2.3vwに指定しているので
ウインドウ幅を拡げたり狭めたりすると文字が大きくなったり小さくなったりします。
最小サイズに18pxをしていしているので18px以下にはなりません。

max()は max(基本サイズ,最小サイズ)で指定します。

(PCの方はウィンドウサイズを変えてみると下記の文字で動きを確認できます。)

最小18px

最後に最小18px最大30pxの文字を作成してみます。
最小値と最大値の両方を指定したい時はclamp関数というものを使用します。

<p class="responsive-letter03">最大30px最小18px</p>
<style>
.responsive-letter03{
	font-size:clamp(18px, 2.3vw, 30px);
}
</style>

基本フォントサイズを2.3vwに指定しているので
ウインドウ幅を拡げたり狭めたりすると文字が大きくなったり小さくなったりします。
最小サイズを18px最大サイズを30pxに設定しているのでウインドウ幅によって
18pxから30pxの間で文字サイズが変動します。

clamp()は clamp(最小値,可変値, 最大値)で指定します。

(PCの方はウィンドウサイズを変えてみると下記の文字で動きを確認できます。)

最大30px最小18px

以上、min(),max(),clamp()を使用してmax-font-size、min-font-sizeを指定する方法でした。
font-sizeだけでなくmarginやpaddingなど他のプロパティにも使えます。

SCSSでmin()やmax()を使うにはunquote関数との併用併用が必要でこちらの記事で解説しています。
SCSSでmin()やmax()を使う時はunquote()が必要です