max()

max() は CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 max() 関数は <length>、<frequency>,、<angle>、<time>、<percentage>、<number>、<integer> が利用できるところならばどこでも使用することができます。

/* プロパティ: max(式 [, 式]) */
width: max(10vw, 4em, 80px);

上の例では、幅は最小 80px ですが、ビューポートの幅が 800px より広いか em の幅が 20px より大きい場合は広くなります。言い換えれば、最小幅は 80px です。 max() の値はプロパティが取りうる最小の値を提供するものとして考えてください。

構文

max() 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

式は (<length> などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 attr() などのその他の式や、入れ子になった min() および max() 関数にすることができます。

式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

メモ

  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
  • min() や他の max() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
  • min() と max() の値を組み合わせたり、 max() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。

形式文法

max( <calc-sum># )
ここで
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
ここで
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
ここで
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

例

画像を最小サイズ以上にする

max() を使用すると、画像の最小幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は大きい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。

.logo {
  width: max(50vw, 300px);
}

<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">

この例では、ロゴの幅は 300px 以上になりますが、ビューポートが 600px よりも広くなったら、ここからビューポートの幅の 50% を保ちながら、ビューポートが拡大するに従って拡大します。

フォントに最小値を設定する

CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。

いくらか CSS を見てください。

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

フォントサイズは最小で 2rems、ページの既定のフォントサイズの2倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。

<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>

max() 関数はプロパティに許される最小値を探るものと考えてください。

アクセシビリティの考慮事項

max() を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、入れ子になった min() 関数を max() の中に使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。

small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは 1rem になります。

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4
max() の定義		 編集者草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報