コーディング Web制作 CSS

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

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

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

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

以上になります。

 

コーディング案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-コーディング, Web制作, CSS
-,