【CSS数学関数】min(), max(), clamp()を使いこなそう！

はじめに

こんにちは、アンドエイチエー コーディング部 新入社員のイガラシです。

皆さんは、CSSのプロパティに min(), max(), clamp() という関数があるのをご存知ですか？

これらはCSSの『数学関数』と呼ばれるもので、使用された関数に応じて複数の数値を比較し、最適な値を設定してくれます。

上手く使えば、動的なレイアウトをコーディングする際に非常に便利なプロパティだと思いますので、この機会に覚えて活用していきましょう！

対応ブラウザ

現時点では、IE11以外の主要ブラウザでサポートされているので、対応ブラウザは気にせずお使いいただけます。

（参考：Can I use… Support tables for HTML5, CSS3, etc ）

min() の使い方

min() は最大値を取ることができる関数です。

「min( VAL, MAX )」のように引数を指定し、引数として渡された値から、最も小さい値を結果として使用します。引数には数式、固定値、ネストされた min() や max() などを渡すことができます。

例として、ある要素の width を「基本的には50vwに設定したいけど、1200pxより大きくはしたくない」という場合は、以下のような書き方ができます。

// 幅50vw, 最大幅1200px
.box {
	　width: 50vw;
	　max-width: 1200px;
}

	↓

.box {
	/* 推奨値50vw、最大値1200px */
  width: min(50vw, 1200px);
}

上記のように、 max-width を使わずに、 min() を使えば１行で書くことができます。

max() の使い方

max() は最小値を取ることができる関数です。

「max(VAL, MIN)」のように引数に2つの値を渡すことができ、引数として渡されている値から、最も大きい値を結果として使用します。

例として、ある要素の width を「基本的には50vwに設定したいけど、400pxより小さくはしたくない」という場合は、以下の書き方ができます。

// 幅50vw, 最小幅400px
.box {
	　width: 50vw;
	　min-width: 400px;
}

 ↓

.box {
	/* 最小値400px、推奨値50vw */
	width: max(50vw, 400px);
}

min() と max() は、基本の書き方は同じですが、min() は最大値、max() は最小値 を取ることができるということを覚えておきましょう。

また、例では幅に対して指定する方法を紹介しましたが、フォントサイズ や余白などのプロパティにも適用できます。

clamp() の使い方

clamp() は最大値と最小値の両方を取ることができます。

「clamp( MIN, VAL, MAX )」という関数を使って、最小値・推奨値・最大値の３つの引数を指定し、値を上限と下限の間に制限することができます。

例えば、font-size を「基本的には2.86vwで設定したいけれど、最大で4.0rem、最小で1.0remにしたい」という場合は、以下の書き方ができます。

.box {
	/* 最小値1.0rem、推奨値2.86vw、最大値4.0rem */
	font-size: clamp(1.0rem, 2.86vw, 4.0rem);
}

上記の場合は、推奨値の2.86vwの計算値が、1.0remの値よりも大きくなるまで、font-size に1.0remが設定されます。また、推奨値の2.86vwの計算値が、2.86vwの4.0remの値よりも大きくなるまで、font-size には2.86vwが設定されます。

また、clamp() は min()とmax()を合わせた書き方もできます。

/* clamp */
.box {
  width: clamp(400px, 50vw, 600px);
}

/*　min()、max()を合わせた書き方 */
.box {
  width: min(600px, max(50vw, 400px));
}

最後に

３つの関数を使えるようになれば、これまで複数行書いていたコードが１行で済み、より見やすくスマートなコードが記述できます。

是非、普段のコーディングに取り入れてみてください！