CSSの数学関数min()、max()、clamp()の基本的な使い方

IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。

数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な使い方を紹介します。

min(), max(), and clamp(): three logical CSS functions to use today
by Una Kravets

CSSの関数のさらにいろいろな使い方は、下記をご覧ください。

• CSSの比較関数 min(), max(), clamp()の使い方を詳しく解説
• CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 数学関数 min()、max()、clamp()とは
• min()、max()、clamp()の基本的な使い方
• 要素の幅にmin()、max()、clamp()を使用する
• paddingの値を管理する
• デスクトップ・スマホそれぞれに適したfont-sizeの定義
• 終わりに

はじめに

レスポンシブデザインの進化に伴い、CSS自体も絶えず進化しており、制作者がコントロールしやすくなっています。現在、すべてのエバーグリーンブラウザでサポートされているCSSのmin()、max()、clamp()関数は、Webサイトやアプリをよりダイナミックに、よりレスポンシブにオーサリングするための最新ツールのひとつです。

min()、max()、clamp()関数を使用すると、レスポンシブに柔軟に対応するレイアウト、デスクトップ・スマホそれぞれに適したfont-sizeの定義、marginやpaddingの管理などに役立ちます。

数学関数 min()、max()、clamp()とは

CSS Values And Units Level 4によると、

min()、max()、clamp()は現在、すべてのエバーグリーンブラウザでサポートされています。
※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。

CSSの数学関数　min(), max(), clamp()のサポートブラウザ

min()、max()、clamp()の基本的な使い方

CSSのmin()関数は、1つ以上のコンマ区切りの計算が含まれ、それらの最小値を使用します。つまり、最大値を設定するためにmin()を使用します。
要素の最大幅を400pxにしたい場合は、下記のように記述します。

デモページ

CSSのmax()関数は、1つ以上のコンマ区切りの計算が含まれ、それらの最大値を使用します。つまり、最小値を設定するためにmax()を使用します。
要素の最小幅を400pxにしたい場合は、下記のように記述します。

デモページ

CSSのclamp()関数は、2つの定義された値（最小値と最大値）の間をクランプすることです。3つのパラメーター（最小値、推奨値、最大値）を使用します。
要素の幅を最小幅が350px、推奨幅が50%、最大幅が500pxにしたい場合は、下記のように記述します。

デモページ

これらの関数の値には、<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)と同じになります。

要点をまとめると、

• min(<value-list>): カンマで区切られた式のリストから、最小値（最も負の値）を使用します。
• max(<value-list>): カンマで区切られた式のリストから、最大値（最も正の値）を使用します。
• clamp(<value-list>): 定義された推奨値に基づいて、値を上限値と下限値の間でクランプします。

要素の幅にmin()、max()、clamp()を使用する

The Elements of Typographic Styleによると、「45～75文字がシングルコラムのページで、満足できる行の長さとして広く認められている」とのことです。
※45～75文字は、英語で。

テキストブロックの幅が45文字より狭くなったり、75文字より広くなったりしないようにするには、clamp()とch単位を使用します。

このCSSにより、ブラウザが段落の幅を決定できます。50%が45chより小さい場合は45chが選択され、50%が75chより大きい場合はその逆となり、50%に設定されます。
下記のデモでは、カード自体がクランプされています。

最小幅と最大幅を定義したclamp()のデモページ

これをmin()関数またはmax()関数だけで分割することもできます。もし、要素の幅を常に50%にして、75chを超えないようにしたい場合は、width: min(75ch, 50%);のように記述します。これはmin()関数を使用して最大サイズを定義するものです。

min()関数を使用して最大値を定義

同様に、max()関数を使用して、テキストを読みやすくするための最小サイズを確保することができます。たとえば、width: max(45ch, 50%);のように記述します。ブラウザは45chと50%のどちらか大きい値を選択します。つまり、要素は少なくとも45ch以上である必要があります。

max()関数を使用して最小値を定義

paddingの値を管理する

min()関数で最大値を設定し、max()関数で最小値を設定するという上記と同じコンセプトを使用して、max()関数を使用してpaddingの最小値を設定することができます。

このアイデアはCSS Tricksからのもので、要素が大きなスクリーンサイズでは追加のpaddingを使用でき、小さなスクリーンサイズでは最小のpaddingを維持できます。

これを実現するには、calc()を使用して、いずれかの側から最小paddingを引きます。calc((100vw - var(--contentWidth)) / 2)または、max()関数を使用して、max(2rem, 50vw - var(--contentWidth) / 2)のように記述します。

max()関数を使用して、コンポーネントの最小パディングを設定デモページ

デスクトップ・スマホそれぞれに適したfont-sizeの定義

Mike Riethmeullerの記事で、calc()関数を使用してフォントの最小サイズと最大サイズを定義して、最小から最大へのスケーリングを可能にするテクニックを普及させました。

clamp()関数を使用した流体タイポグラフィデモページ

clamp()関数を使用すると、これをより明確に書くことができます。複雑な文字列を必要とするのではなく、ブラウザがあなたに代わって処理してくれます。フォントの許容可能な最小サイズ（例えばタイトルなら1.5rem、最大値（つまり3rem）、理想的なサイズは5vw）を設定します。

これではるかに簡潔なコードで制限となる最小値と最大値に達するまで、ページのビューポート幅に合わせて拡大縮小するタイポグラフィが得られます。

注意: max()やclamp()でテキストの大きさを制限すると、1.4.4 Resize text (AA)でWCAGエラーが発生する可能性があります。これは、ユーザーがテキストを元のサイズの200%に拡大縮小できない場合があるためです。 必ずズームで結果をテストしてください。

終わりに

CSSの数学関数であるmin()、max()、clamp()は非常に強力で、サポートも充実しているため、レスポンシブUIの構築に役立つことでしょう。その他のリソースについては、以下をご覧ください。

• CSS Values and Units on MDN
• CSS Values and Units Level 4 Spec
• CSS Tricks on Article on Inner-Element Width
• min(), max(), clamp() Overview by Ahmad Shadeed
  翻訳記事: min(), max(), clamp()の使い方を詳しく解説