「存在自体は知っていたけど、IEに非対応だからなぁ…」という理由でスルーしていた、CSSの割と新しい機能である数学関数「min(),max(),clamp()」ですが、IEが死滅したことによって実用できる時代が訪れたので色々と調べてみました。

数学関数じゃなくて比較関数って紹介してるところも多いですが、MDNでは数学関数って書いてました。まぁどっちでもいい。

そもそもCSSの数学関数って何？

今のところ主要ブラウザで定義されている数学関数は以下の4種類。

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

calc()は横幅とかを指定するときによく使うので、もうかなり浸透しているんじゃないですかね？というわけで説明は省きます。

他の関数もcalc()と同じように、括弧の中にいくつかの数値を入れておけば条件に沿った値を指定することが出来るという超便利な機能を持っています。

まぁ見たほうが早いので、さっそくそれぞれの関数についての解説に移ります。

min()

min関数では、括弧内に入れた値の中で最も小さい数値が適用されます。

要は「関数内で最も小さい数値が最大値になる」という意味なので、max-widthをイメージしてください。

以下の2つのCSSは、全く同じ挙動を示します。

width: min(200px,100vw);

width: 100vw;
max-width: 200px;

max()

max関数では、括弧内に入れた値の中で最も大きい数値が適用されます。

要は「関数内で最も大きい数値が最小値になる」という意味なので、min-widthをイメージしてください。

以下の2つのCSSは、全く同じ挙動を示します。

width: max(200px,100vw);

width: 100vw;
min-width: 200px;

clamp()

clacmp関数では、括弧内に入れた値の中の中間の数値が適用されます。ちなみに順不同です。

こんなのどうやって活用するの？って思うかもしれませんが、これはmin-widthとmax-widthを同時に指定できる機能だと思えば理解しやすいかもしれません。

以下の2つのCSSは、全く同じ挙動を示します。

width: clamp(640px,80vw,1280px);

width: 80vw;
min-width: 640px;
max-width: 1280px;

clamp関数はちょっと難しいので、実際の画面幅（ビューポート）も絡めたサンプルを3つ紹介します。

サンプルに使うコードはこちら。

---

こんな感じで、min,max,clamp関数はビューポートに対しての割合を指定できるvwや、%と合わせて使うのがメインになります。というか固定値しか入れなかったらわざわざ関数使う意味無いですからね…

活用例

3つの数学関数を紹介しましたが、先程までのサンプルだと「あれ？max-widthとmin-width使えば良くね？？」ってなりそうなので、もう少し実用的な使い方を1つ紹介します。

フォントサイズを可変にしつつ、最小値と最大値を指定する

clamp関数はfont-sizeにも使えるので、今まで実装するのがクソめんどくさかったフォントサイズのレスポンシブ化が、メディアクエリを使わずに実装できるようになります。

例えば以下の条件を満たすフォントサイズを指定する方法を考えてみましょう。ちなみにclamp関数内でcalc関数も使います。

• 画面幅が600px以下のときは16pxに固定
• 画面幅が1500px以上のときは42pxに固定
• 画面幅が601～1499pxのときは、16～42pxの間でフォントサイズを滑らかに変化させる

解答

なんだこの難解なコードは…とりあえず実際の挙動を見てみましょう。

デモ

See the Pen Font-RWD by Leo_8192 (@Leo_8192) on CodePen.

PCで閲覧している人は、下のリンクからデモを開いてブラウザのサイズをぐりぐり変化させてみてください。先程の条件を満たす挙動をしているのが分かると思います。

解説

まず、最小値16pxと最大値42pxはclamp関数内に普通に入れてOKです。次に中間のフォントサイズを滑らかに指定する方法ですが、calc部分は以下の計算式に当てはめてください。

数字に強い人なら多分理解できると思いますが、まぁ計算式の意味なんて知らなくても使えるんでコピペで済ませるのがオススメ。動けばいいんだよ。

ただこのコード、しっかり理解するとけっこう面白いので今度別の記事で詳しく書きます。

まとめ

以上、CSSの数学関数についての解説でした。

正直自分もまだそこまで有効な活用方法を見つけられていないんですが、今後本格的にIEを切り捨てても良い状況になったら、max-widthやmin-widthを使うことは無くなるんじゃないかなぁと思いました。clamp関数使ったほうが可読性が高いしコードの量も減らせるんで、1～2年後にはスタンダードになってるかも？

フォントサイズのレスポンシブ対応が今のところ最もclamp関数を活かせる場面だとは思いますが、いかんせん使い所が限られるんですよね…メインビジュアルのアクセントとかには積極的に使ってもいいかなーって感じです。

とりあえず、Webの世界は新技術がどんどん生まれていくので、取り残されないようにこういう知識はどんどん蓄えておきましょう。