CSS Web制作

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);であれば以下のようになります。

  • 最小値は16px
  • 推奨値は3vw(画面幅によって変動)
  • 最大値は30px

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

画面幅いっぱいで100vwなので、画面幅が1000pxの1vwは10pxになります(100vw = 1000px)

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

  • 画面幅400px → font-size: 3vw; = 12px →ただし最小値が16pxなので16px
  • 画面幅800px → font-size: 3vw; = 24px
  • 画面幅1600px → font-size: 3vw; = 48px →ただし最大値が30pxなので30px

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

  • 画面幅400px → font-size: clamp(16px, 12px, 30px);
  • 画面幅800px → font-size: clamp(16px, 24px, 30px);
  • 画面幅1600px → font-size: clamp(16px, 48px, 30px);

どのフォントサイズが適用されるか?

・推奨値が最小値と最大値の間であれば推奨値が適用
・推奨値が最小値以下の場合は最小値が適用
・推奨値が最大値以上の場合は最大値が適用

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

  • 画面幅を狭くした時にフォントサイズが必要以上に小さくならない
  • 画面幅を広くした時にフォントサイズが必要以上に大きくならない

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

  • 画面幅800px → font-size: 3vw; = 24px
  • 画面幅320px → font-size: 3vw; = 9.6px
  • 画面幅2500px → font-size: 3vw; = 75px

画面サイズが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より大きくはなりません。

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

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作