【CSS Modules】max()関数の使い方
max()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
max()関数は、CSSにおいて、引数として与えられた複数のCSS値や計算式を比較し、その中で最も大きい値を選択して返す関数です。この関数は、要素の幅 (width) や高さ (height)、最小幅 (min-width) や最大幅 (max-width)、フォントサイズ (font-size)、余白 (margin)、パディング (padding) など、様々なCSSプロパティの値として使用することができます。
例えば、width: max(50vw, 300px);と指定した場合、要素の幅は、ビューポート（表示領域）の幅の50%と、固定値の300ピクセルのうち、常に大きい方が適用されます。これにより、ブラウザのウィンドウサイズが縮小されても、要素の幅が300ピクセルを下回ることがなく、コンテンツの視認性やレイアウトの崩れを防ぐことができます。
この機能は、特にレスポンシブデザインの実装において非常に有効です。特定の要素が小さくなりすぎないように最小サイズを保証しつつ、利用可能なスペースに応じて柔軟に拡大させたい場合に役立ちます。異なる単位（例：vw、px、%）の値でも比較できるため、ウェブサイトやアプリケーションが多様なデバイスサイズや表示環境に適切に対応するための強力なツールとなります。デザインの柔軟性を高め、ユーザーエクスペリエンスを向上させる上で重要な役割を果たす関数です。
構文(syntax)
1width: max(100px, 50%);
引数(parameters)
<calc-sum>, <calc-sum>, ...
- <calc-sum>: 比較対象となる計算式です。複数指定できます。
戻り値(return)
<number> | <dimension> | <percentage>
max()関数は、指定された複数の値の中から最も大きい値を返します。返される値は、数値、絶対的な長さ（pxなど）、または親要素に対する割合（%）のいずれかになります。