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

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

Una Kravets

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

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

CSS 値と単位レベル 4

ブラウザ サポート

min()

Browser Support

• 79
• 79
• 75
• 11.1

Source

max()

Browser Support

• 79
• 79
• 75
• 11.1

Source

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

用途

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

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

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

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

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

clamp() 関数は、この Codepen デモで指定された最小値と最大値の間に値を維持します。

これらの関数は、<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) など）できます。

注: min()、max()、clamp() 関数内で計算を使用する場合、calc() を呼び出す必要はありません。たとえば、font-size: max(calc(0.5vw - 1em), 2rem) は font-size: max(0.5vw - 1em, 2rem) と同じです。

これらの関数の使用例をいくつかご紹介します。

最適な幅

Robert Bringhurst 著の The Elements of Typographic Style によると、「45 ～ 75 文字の長さは、セリフ付きのテキストフェイスをテキストサイズで設定した 1 列のページで、十分な長さの行として広く認識されています」。

テキスト ブロックの幅を 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);
}

警告: max() または clamp() を使用して最大フォントサイズを制限すると、ユーザーがテキストを元のサイズの 200% に拡大できなくなる可能性があるため、1.4.4 テキストのサイズ変更（AA）で WCAG 違反になる可能性があります。必ずズームで結果をテストしてください。

その他のリソース

• MDN の CSS の値と単位
• CSS 値と単位レベル 4 の仕様
• 内部要素の幅に関する CSS のヒントの記事
• Ahmad Shadeed 氏による min()、max()、clamp() の概要