CSS比較関数min()、max()、clamp()の使い方を解説【レスポンシブ対応に超便利！】

CSS比較関数のmin()、max()、clamp()がレスポンシブ対応に便利って聞いたけど使い方が分からない・・・

CSS比較関数のmin()、max()、clamp()などを使うとこれまで複数行書いていたコードを1行で書けたり、フォントサイズなどを可変に且つ必要以上に小さくなったり大きくなったりする事を防ぐ事が出来るようになります。

IE未対応だったのでこれまで気軽に使えませんでしたが、IEのサポートが終了したのでこれからは気兼ねなく使っていきたいと思います👍

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

min()の使い方（最大値を設定）

min()は、最大値を設定することが出来ます。

言い方を変えると『どちらか小さい方を値が適用される』となります。

例えばmin(500px, 300px)であれば300pxが適用されます。

ただどちらも固定値では意味がないので、片方は%やvwなど可変の単位にします。

例えば最大幅を設定したい時は以下のように書きます。

width: min(100%, 500px);

別の書き方をすると以下のようになります。

max-width: 500px;
width: 100%;

こちらは知っている人も多いと思いますが、これと同じことをminを使うと1行で書けるということですね。

min()の実装例

先ほどご紹介した2つの書き方を並べてみます。

/* max-widthを使う書き方 */
.min-old {
  max-width: 500px;
  width: 100%;
}

/* minを使う書き方 */
.min-new {
  width: min(100%, 500px);
}

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

左上のHTMLかCSSをクリックすると画面が狭くなりますが、同じように要素の幅も狭くなります。

右上のEDIT ON CODEPENをクリックして全画面にしてから、画面幅を変えてみると分かりやすいと思います。

max()の使い方（最小値を設定）

max()は、最小値を設定することが出来ます。

言い方を変えると『どちらか大きい方を値が適用される』となります。

例えばmax(500px, 300px)であれば500pxが適用されます。

ただどちらも固定値では意味がないので、片方は%やvwなど可変の単位にします。

例えば最小幅を設定したい時は以下のように書きます。

width: max(100%, 500px);

別の書き方をすると以下のようになります。

min-width: 500px;
width: 100%;

こちらは知っている人も多いと思いますが、これと同じことをmaxを使うと1行で書けるということですね。

max()の実装例

先ほどご紹介した2つの書き方を並べてみます。

/* min-widthを使う書き方 */
.max-old {
  min-width: 500px;
  width: 100%;
}

/* maxを使う書き方 */
.max-new {
  width: max(100%, 500px);
}

See the Pen
max(最小値を設定) by junpei (@junpei-sugiyama)
on CodePen.

左上のHTMLかCSSをクリックすると画面が狭くなりますが、最小値がどちらも500pxなので横に飛び出ます（500pxより小さくならないので合っています）

右上のEDIT ON CODEPENをクリックして全画面にしてから、画面幅を変えてみると分かりやすいと思います。

max()は最小値の設定なので、全画面にすると横幅いっぱいになります（左右にpaddingで余白は作っています）

clamp()の使い方（最小値、推奨値、最大値を設定）

clamp()は、最小値、推奨値、最大値を設定することが出来ます。

書き方はclamp(最小値, 推奨値, 最大値);となります。

推奨値って何？

と思うかも知れませんが、フォントサイズを例に見てみます。

例えばfont-size: clamp(16px, 3vw, 30px);であれば以下のようになります。

vwは画面幅によってサイズが変わる単位ですね。

画面幅いっぱいで100vwなので、画面幅が1000pxの1vwは10pxになります（100vw ＝ 1000px）

具体的に推奨値のフォントサイズだけ画面幅別で見てみます。

全体のコードfont-size: clamp(16px, 3vw, 30px);で見るとこうなります。

つまりclamp()を使うメリットは以下になります。

もしclampを使わずにfont-size: 3vw;だけの場合はこのようになります。

画面サイズが800pxとかであれば問題ありませんが、画面幅によっては小さすぎたり大きすぎたりしてしまいます。

これもmin()やmax()と同様に推奨値は固定値では意味がないので、%やvwなど可変の単位にします。

clamp()の実装例

先ほど解説したコードで見てみます。

p {
  font-size: clamp(16px, 3vw, 30px);
}

See the Pen
フォントで最小値、推奨値、最大値を設定 by junpei (@junpei-sugiyama)
on CodePen.

左上のHTMLかCSSをクリックすると画面が狭くなりフォントサイズが小さくなりますが、16pxより小さくはなりません。

右上のEDIT ON CODEPENをクリックして全画面にして見るとフォントをサイズが大きくなりますが、30pxより大きくはなりません。

あとは全画面の状態で画面幅を変えてみると可変するのが確認できると思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！