【CSS Modules】min()関数の使い方
min()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
min()関数は、複数の値の中から最も小さい値を算出するために使用する関数です。この関数は、CSSプロパティに適用する最終的な値を決定する際に、柔軟な制御を可能にします。例えば、要素の幅や高さ、フォントサイズなどを設定する際に、複数の候補の中から最小値を採用したい場合に利用されます。
具体的な利用場面としては、レスポンシブデザインでの要素のサイズ調整が挙げられます。例えば、「要素の幅は親要素の50%にしたいが、最低でも300ピクセルは確保したい」といった要件がある場合、width: min(50%, 300px); のように記述することで、この挙動を実現できます。これにより、親要素の幅が600ピクセルより大きい場合は50%が適用され、600ピクセル以下の場合は300ピクセルが適用されることになります。常に小さい方の値が選択されることで、意図しないレイアウト崩れを防ぐことができます。
min()関数には、コンマ区切りで複数のCSS値や計算式を指定できます。これらの引数はそれぞれ数値として評価され、その評価された値の中で最も小さいものが関数の結果として返されます。異なる単位（例: px、%、em、vw）を持つ値を組み合わせて指定することも可能です。CSSが自動的にこれらの単位を比較可能な値に変換して最小値を決定するため、予測可能で堅牢なレイアウトの作成に貢献します。
公式リファレンス: min()
構文(syntax)
1width: min(50%, 300px);
引数(parameters)
value1: <calc-sum>, value2: <calc-sum>
- value1: <calc-sum>: 比較する最初の計算式（長さ、角度、色など）
- value2: <calc-sum>: 比較する2番目の計算式（長さ、角度、色など）
戻り値(return)
<calc-sum>
min()関数は、引数として与えられた複数の<calc-sum>値の中から最小の値を返します。