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

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

Una Kravets

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

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

CSS 値と単位 レベル 4

ブラウザ サポート

min()

Browser Support

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

Source

max()

Browser Support

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

Source

clamp()

Browser Support

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

Source

用途

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 によると、「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 によるものです。