max()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
max()
は CSS の関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 max()
関数は <length>
、<frequency>
、<angle>
、<time>
、<percentage>
、<number>
、<integer>
が使用できるところならばどこでも使用することができます。
試してみましょう
上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 max()
の値はプロパティが取りうる最小の値を提供するものとして考えてください。
構文
メモ
- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも
auto
が指定されていたかのように扱われる可能性があります。 min()
や他のmax()
関数を式の値として入れ子にすることが認められています。式は完全な数式なので、calc()
関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の
<length>
構文値を使用できます。 min()
とmax()
の値を組み合わせたり、max()
をclamp()
やcalc()
関数の中で使用したりすることができます (そしてよく必要になります)。
形式文法
例
フォントに最小値を設定する
CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。
多少の CSS を見てみましょう。
h1 {
font-size: 2rem;
}
h1.responsive {
font-size: max(4vw, 2em, 2rem);
}
フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。
<h1>このテキストは常に読みやすいですが、サイズは変わりません。</h1>
<h1 class="responsive">
このテキストは、常に読みやすく、ある意味でレスポンシブです。
</h1>
max()
関数はプロパティに許される最小値を探るものと考えてください。
アクセシビリティの考慮
仕様書
Specification |
---|
CSS Values and Units Module Level 4 # calc-notation |
ブラウザーの互換性
BCD tables only load in the browser