CSSの数学関数を使って記述をスマートに！【calc(), min(), max(), clamp()】

CSS関数をご存じですか？
よく使うのがcalc()やtranslate()、rgba()などで、関数名 + ()で記述されるもののことを指します。

今回は、中でもCSSの数学関数に焦点を絞って解説していこうと思います。
calc()は普段から使っている方も多いと思いますが、min()、max()、clamp()は馴染みのない方もいらっしゃるかもしれません。

min()、max()、clamp()はIE非対応なので、これまで導入の機会がありませんでした。
しかし、IEのサポートが2022年6月15日で終了するとのことで、これからはCSS関数をはじめとしたIE未対応のCSSを利用できる機会もどんどん増えていくのではないでしょうか！
※とは言え、IEのサポートが終了してからもしばらくは対応が必要なので、導入タイミングには気を付けたいところです。

次の章からCSSの数学関数【calc(), min(), max(), clamp()】とはどんなものか、またどのように使えるのか、を詳しくまとめていきます。
CSS関数を使って記述をスマートにしましょう！

CSSの数学関数とは

• calc()
• min()
• max()
• clamp()

今あるのはこの４つです。
()の中に、px、%、rem、emなどの単位の値や数字を指定して、その値を数学的に定義することができます。
固定値を入れておく場合は親要素の横幅が変わるなどしたときに再計算する必要がありますが、数学関数を使えば簡単に指定し直せるのでとても便利です。

実装予定のCSS数学関数

また、今後CSSの数学関数が追加されていく予定とのことです。
主な関数は以下です。

• sin()
  └指定した数のサイン
• cos()
  └指定した数のコサイン
• tan()
  └指定した数のタンジェント

他にも、逆三角関数（アークサイン、アークコサイン、アークタンジェント）や、平方根の関数が実装予定のようです。

三角関数は円運動に使われるそうなので、CSSで座標の指定がしやすくなったり、より複雑な図形を作りやすくなったりするのかもしれません！
個人的には数学が大の苦手なのでいまいちどう使われるのかぴんと来ていません。

▼参考
calc()以外にもCSSの数学関数が新しく増える！今度はサイン・コサイン・タンジェント sin(), cos(), tan() が追加
三角関数、何に使うの？→点を回すことができます（すごい）

calc()

四則算（加算：+、減算：–、乗算：*、除算：/）が使えます。
calc(10px + 5px) は15px、
calc((100px – 20px)/2) は40pxが指定されます。

※注意点
このとき、正の数・負の数の記号と見分けるために、加算：+と減算：–の記号の前後には必ず半角スペースを置きます。
calc(100%-20px) と指定すると、「100%」「-」「20px」ではなく、「100%」と「-20px」で分けられてると判断されてしまいます。

■ドキュメント
calc() – CSS: カスケーディングスタイルシート | MDN

デモ

下の水色の箱の横幅は、100%から80px引いた長さになっています。

長さ比較（100%の長さ）

使い方

calcはいろんなところで使えますが、特に便利なものを1つ紹介します。
ウィンドウ幅を広げたり縮めたりして動きを確認できますので、お試しください。

横並び時の横幅を自動で設定

flexで横並びにした子要素の横幅を、100%の値から計算して設定しておきます。

calc((100% – 60px)/3)
各要素の間に20pxの余白を設けたいので、予め100%から60px引いておきます。
3つ横並びにするので、/3。

ウィンドウ幅を縮めてみてください。
親の横幅が変わると、一緒に子要素も小さくなってくれて便利です。

min()

値をカンマ区切りで指定しておくと、その中から最も小さい値を適用してくれます。
つまり、min(20px,10px)と記述してあったら、10pxが適用されます。

どちらもpxの数値を指定しておくのだと意味がないので、片方をvwにしてみます。

min(20px,1vw)
この場合、1vwの値が20px未満のときは1vwが適用され、
1vwが20pxを超えたとき、値は20px（最大値）になります。

1vw → ウィンドウ幅が1000pxの時10px。20pxを超えるのはウィンドウ幅が2000pxより大きいとき。

■ドキュメント
min() – CSS: カスケーディングスタイルシート | MDN

デモ

下のテキストはmin(20px,1vw)です。
フォントサイズは20pxより大きくならず、ウィンドウ幅が2000px未満のときに1vwになり縮んでいきます。
ウィンドウ幅を変えて見てみてください。

使い方

具体的な使い方をご紹介します。
ウィンドウ幅を広げたり縮めたりして動きを確認できますので、お試しください。

max-width

widthとmax-widthを同時に指定するような記述ができます。
以下の「min()サンプル」の青い箱は、ウィンドウ幅の70%の横幅を保ち（width）ますが、青い箱の横幅は800pxより大きくなることはありません（max-width）。
・widthとmax-widthを同時に指定できる。

max()

値をカンマ区切りで指定しておくと、その中から最も大きい値を適用してくれます。
つまり、max(20px,10px)と記述してあったら、20pxが適用されます。

どちらもpxの数値を指定しておくのだと意味がないので、片方をvwにしてみます。

max(20px,1vw)
この場合、1vwの値が20pxより大きいときは1vwが適用され、
1vwが20px未満のとき、値は20px（最小値）になります。

1vw → ウィンドウ幅が1000pxの時10px。20pxを超えるのはウィンドウ幅が2000pxより大きいとき。

■ドキュメント
max() – CSS: カスケーディングスタイルシート | MDN

デモ

下のテキストはmax(20px,1vw)です。
フォントサイズは20pxより小さくならず、ウィンドウ幅が2000pxを超えたときに1vwになり大きくなっていきます。
ウィンドウ幅を変えて見てみてください。

使い方

具体的な使い方をご紹介します。
ウィンドウ幅を広げたり縮めたりして動きを確認できますので、お試しください。

min-width

widthとmin-widthを同時に指定するような記述ができます。
以下の「max()サンプル」の青い箱は、ウィンドウ幅の70%の横幅を保ち（width）ますが、青い箱の横幅は800px以下になることはありません（min-width）。

余白

vwで設定した余白が、ウィンドウ幅を縮めるにつれてすごく詰まっていってしまう……ということがよくありますが、以下のように記述してみてください。
オレンジの動物のタグのmargin-bottomとmargin-rightは、1vwに設定されています。
ウィンドウ幅を縮めていくと余白が縮まっていきますが、5pxより小さくなりません。

• うさぎ
• ねこ
• いぬ
• わに
• きりん
• はりねずみ
• くま
• つちのこ
• あらいぐま
• ひつじ
• アルパカ

clamp()

最小値、推奨値、最大値を指定でき、min()とmax()を組み合わせたような動きをしてくれます。
clamp(10px,15px,20px)と記述してあったら、15pxが適用されます。

推奨値をvwの値に変えて見てみます。

clamp(10px,1vw,20px)
この場合、1vwの値が10pxより大きいとき及び20pxより小さいときは1vwが適用され、
1vwが10px未満のときは10px（最小値）、20pxより大きいときは20px（最大値）になります。

1vw → ウィンドウ幅が1000pxの時10px。20pxを超えるのはウィンドウ幅が2000pxより大きいとき。

■ドキュメント
clamp() – CSS: カスケーディングスタイルシート | MDN

また、ドキュメントに記載がありますが、
clamp(最小値,推奨値,最大値)の記述はmax(最小値, min(値, 最大値))で再現できます。

デモ

下のテキストはclamp(10px,1vw,20px)です。
フォントサイズは、ウィンドウ幅が2000px以上のときは20px、1000px以下のときは10px、その間は1vwになります。
ウィンドウ幅を変えて見てみてください。

使い方

具体的な使い方をご紹介します。
ウィンドウ幅を広げたり縮めたりして動きを確認できますので、お試しください。

max-font-size・min-font-size

デモとほぼ同じ内容にはなりますが、
vwでfont-sizeを指定したときに、ウィンドウ幅によって文字サイズがデカすぎる・小さすぎるという問題に悩まされることがあります。
widthやheightにはmax-widthやmax-heightが用意されていますが、font-sizeにはありません。

clampを使えばmax-font-size・min-font-sizeを指定できます！
以下のサンプルでは読みやすさを考えて、最小値：13px、最大値：18px、推奨値：1.333vw（ウィンドウ幅が1200pxのとき16px）としました。

メディアクエリで細かく指定する必要がないので便利ですね。

最後に

min()、max()、clamp()は少しややこしくて理解に時間がかかったのですが、理解してみるととても便利で使い勝手がよさそうですよね。
IE非対応のため、まだ実案件では使えないのが残念です。
IEサポート終了に伴って、数学関数をはじめとしたIE非対応のCSSプロパティがどんどん使えるようになるのが待ち遠しいですね。

また今後もCSS数学関数は追加されていくとのことで、どんなことができるようになるのかも楽しみの一つです。

本記事がWebに携わるみなさまのお役に立てますと幸いです。

本記事を書くにあたり、以下を参考にさせていただきました。
ありがとうございました！
MDN Web Docs
【CSS変数と関数】var, calc(), min(), max(), clamp()
CSS関数のclamp()・max()・min()についてまとめてみる
max-font-sizeやmin-font-sizeを指定したい時はこう！