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

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

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

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

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より大きくはなりません。

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら