Web Design Leaves

作成日：2024年9月29日

min()

min() は CSS プロパティの値として括弧内に指定されたカンマで区切られた式や値のリストから最小の値を返します。そのため、最大値を設定する場合に min() を使用します。

括弧内に指定する値や式の順番は関係ありません。

• MDN Web Docs : min()
• 仕様書：CSS Values and Units Module Level 4 | 日本語訳

以下は指定例です。

以下の場合、20vw（ビューポート幅の20%）と 300px のうち、小さい方が選ばれて設定されます。

.box {
  width: min(20vw, 300px);
}

上記の CSS は以下と同じことです。

.box {
  width: 20vw;
  max-width: 300px;
}

サンプル

以下は最大幅を 300px に設定する例です。

この例の場合、ビューポート幅が 1500px より大きくなると 20vw（ビューポート幅の 20%）は 300px より大きくなるので、小さい方の値 300px が適用されます。

ビューポート幅が 1500px 未満の場合は、 20vw（ビューポート幅の 20%）が適用されます。

max()

max() は CSS プロパティの値として括弧内に指定されたカンマで区切られた式や値のリストから最大の値を返します。そのため、最小値を設定する場合に max() を使用します。

括弧内に指定する値や式の順番は関係ありません。

MDN Web Docs : max()

以下は指定例です。

以下の場合、20vw（ビューポート幅の20%）と 300px のうち、大きい方が選ばれて設定されます。

.box {
  width: max(20vw, 300px);
}

上記の CSS は以下と同じことです。

.box {
  width: 20vw;
  min-width: 300px;
}

サンプル

以下は最小幅を 300px に設定する例です。

この例の場合、ビューポート幅が 1500px より小さくなると 20vw（ビューポート幅の 20%）は 300px より小さくなるので、大きい方の値 300px が適用されます。

ビューポート幅が 1500px より大きい場合は、 20vw（ビューポート幅の 20%）が適用されます。

clamp()

clamp() は最小値、推奨値、最大値の3つの引数を取り、値を最小値と最大値の間に制限します。

英語の clamp には「締める」や「固定する」という意味があります。

推奨値が最小値を下回ると、値は最小値が適用され、推奨値が最大値を上回ると、値は最大値が適用されます。言い換えると、値の取り得る範囲を指定することができます。

※ min() や max() とは異なり、clamp() では括弧内に指定する値に順番があり、最小値、推奨値、最大値の順に記述する必要があります。

MDN Web Docs : clamp()

以下は指定例です。

以下の場合、推奨値の 20vw（ビューポート幅の20%）が 200px より大きく、300px より小さければ、その値が適用され、200px より小さい場合は最小値の 200px が、300px より大きい場合は最大値の 300px が適用されます。

.box {
  width: clamp(200px, 20vw, 300px);
}

上記の CSS は min() と max() を使って以下のように記述しても同じことになります。

.box {
  width: min(300px, max( 20vw, 200px));
  /* 以下でも同じ */
  width: max(200px, min( 20vw, 300px));
}

サンプル

以下は最小幅を 200px、最大幅を 300px に設定する例です。

この例の場合、ビューポート幅が 1000px より小さくなると 20vw（ビューポート幅の 20%）は 200px より小さくなるので、最小値の 200px が適用され、ビューポート幅が 1500px より大きくなると 20vw は 300px より大きくなるので、最大値の 300px が適用されます。

使用例

min(), max(), clamp() は width 以外にも margin や padding、font-size、グラデーションの範囲などでも利用できます。

以下は、font-size と line-height に clamp() を使って最小値と最大値を設定し、padding に min() を使って最大値を設定する例です。

この例の場合、例えば、font-size はビューポート幅が 50rem（640px）〜80rem（1024px）では推奨値の 2.5vw が使われ、それ以外では最小値と最大値が使われます。

 .fluid {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  line-height: clamp(1.85rem, 3vw, 2.75rem);
  padding: min(3vw, 40px);
}

<div class="fluid">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur magnam sit culpa quo distinctio aperiam reiciendis labore harum? Sint officia qui obcaecati amet hic laborum non sit autem id accusamus.</p>
  <p>Impedit tempore, est magni amet ipsam vero laboriosam fugit accusantium, optio illo eligendi, modi quidem quisquam laborum? Neque nostrum quos, consectetur, error, accusamus eius odit recusandae unde corrupti labore assumenda.</p>
</div>

以下は、WordPress の theme.json のカスタムフォントサイズ プリセットの登録で、流動タイポグラフィ（Fluid Typography）を有効にした場合に、出力される CSS カスタムプロパティの例です。

Medium と Large のサイズ（3、4行目）では clamp() を使って、ビューポートに合わせてフォントサイズを拡大縮小しています。

比較関数 min(), max(), clamp() は calc() の機能もあるため、異なる単位や値を直接扱うことができるため、以下のように複数の値や単位の演算を直接行うことができます。

:root {
  --wp--preset--font-size--sm: 1rem;
  --wp--preset--font-size--md: clamp(1rem, 1rem + ((1vw - 0.375rem) * 1.333), 1.5rem);
  --wp--preset--font-size--lg: clamp(1.25rem, 1.25rem + ((1vw - 0.375rem) * 2), 2rem);
}