CSS min()、max()、clamp()

広くサポートされているこれらの CSS 関数を使用して、要素のサイズを制御し、適切な間隔を維持し、流動的なタイポグラフィを実装する方法を学びます。

Una Kravets

レスポンシブ デザインの微妙な違いに合わせて、CSS は継続的に進化し、作成者が細かく制御できるようにしています。min()、max()、clamp() 関数は、すべての最新ブラウザでサポートされており、ウェブサイトやアプリの作成をよりダイナミックでレスポンシブにするための最新のツールです。これらの関数を使用すると、要素のサイズとサイズ変更を制御し、要素間の間隔を維持し、柔軟で流動的なタイポグラフィを作成できます。

数学関数の calc()、min()、max()、clamp() では、加算（+）、減算（-）、乗算（*）、除算（/）を含む数式をコンポーネント値として使用できる

CSS の値と単位レベル 4

ブラウザ サポート

min()

対応ブラウザ

  • Chrome: 79。
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1。

ソース

max()

対応ブラウザ

  • Chrome: 79。
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1。

ソース

clamp()

対応ブラウザ

  • Chrome: 79。
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1。

ソース

用途

min()、max()、clamp() は、適切な CSS 式の右側で使用できます。min() と max() の場合、値の引数リストを指定すると、ブラウザが値の最小値または最大値を決定します。たとえば、width: min(1rem, 50%, 10vw) の場合、ブラウザはこれらの相対単位のうち最小の単位を計算し、その値を要素の幅に使用します。

この Codepen デモでは、min() 関数を使用してオプションのリストから最小値が選択されます。

max() 関数は最大値に対しても同様の処理を行います。

この Codepen デモでは、max() 関数を使用してオプションのリストから値が選択されます。

clamp() を使用するには、最小値、計算に使用する理想的な値、最大値の 3 つの値を入力します。

この Codepen デモでは、clamp() 関数によって値が指定された最小値と最大値の範囲内に保持されています。

これらの関数は、<length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> のいずれかが使用できる場所で使用できます。これらは、単独で（font-size: max(0.5vw, 50%, 2rem) の場合）、calc() とともに（font-size: max(calc(0.5vw - 1em), 2rem) の場合）、または組み合わせて（font-size: max(min(0.5vw, 1em), 2rem) の場合）使用できます。

これらの関数の使用例を次に示します。

最適な幅

Robert Bringhurst の The Elements of Typographic Style によれば、「セリフ体のテキストの面をテキストサイズの 1 列に設定するには、45 文字から 75 文字までの行が十分であると広く考えられています。」

テキスト ブロックの幅を 45～75 文字に保つには、clamp() と ch（幅 0 の文字間隔）単位を使用します。

p {
  width: clamp(45ch, 50%, 75ch);
}

これにより、ブラウザが段落の幅を決定できるようになります。幅はデフォルトで 50% に設定されています。50% が 45ch より小さい場合は、代わりに 45ch が幅として使用されます。50% が 75ch より大きい場合は、75ch が使用されます。

clamp() 関数を使用して、最小の幅と最大の幅を設定します。Codepen のデモをご覧ください。

min() または max() のみを使用して分割することもできます。要素を常に 50% の幅にし、大画面で幅が 75ch を超えないようにするには、width: min(75ch, 50%); を使用して最大サイズを設定します。

min() 関数を使用して最大幅を設定します。

同様に、width: max(45ch, 50%); のように max() 関数を使用して、判読可能なテキストの最小サイズを設定できます。ここでは、値が大きい方が選択されます。つまり、要素は 45ch 以上である必要があります。

max() 関数を使用して最小幅を設定します。

パディングを管理する

max() を使用して、最小パディング サイズを設定することもできます。この例は CSS Tricks から引用したものです。読者の Caluã de Lacerda Pataca が、大きな画面サイズでは要素に追加のパディングを設定し、小さな画面サイズでは最小パディングを維持するというアイデアを共有しています。これを行うには、calc() または max() を使用して、要素の両側（calc((100vw - var(--contentWidth)) / 2) または max(2rem, 50vw - var(--contentWidth) / 2)）から最小パディングを減算します。スタイルシートは以下のようになります。

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
max() 関数を使用して、コンポーネントの最小パディングを設定します。 Codepen でデモを確認する。

流動的なタイポグラフィ

流動的なタイポグラフィを有効にするために、Mike Riethmeuller は、clamp() 関数を使用して最小フォントサイズと最大フォントサイズを設定し、それらのサイズ間でのスケーリングを可能にする手法を普及させました。

clamp() を使用して、滑らかなタイポグラフィを作成します。Codepen でデモを確認する。

clamp(), より前は、フォント スケーリングを設計するには複雑なスタイル文字列が必要でした。後はブラウザにお任せしましょう。許容される最小フォントサイズ（タイトルの場合は 1.5rem など）、最大サイズ（3rem など）、理想的なサイズ（5vw など）を設定します。これにより、最小値と最大値の制限に達するまで、ページのビューポート幅に合わせてタイポグラフィがスケーリングされます。コードはほとんど必要ありません。

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

その他のリソース

Unsplash の @yer_a_wizard のカバー画像。