CSS min() 関数
CSS 関数例
min() 関数を使用して #div1 の幅を最小値に設定します。50% または 300px のうち最小の値を採用します：
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
試してみる »
定義と使用法
min() 関数を使用すると、カンマ区切りの式のリストから最小値をプロパティの値として選択できます。
min() 関数メソッドは、1 つ以上のカンマ区切りの式を引数として受け取り、数値が最小の式の値が指定されたプロパティの値になります。
/* 属性: min(expression [, expression]) */ width: min(1vw, 4em, 80px);
上記の例では、幅は最大 80px です。ビューポートの幅が 800px 未満の場合、または 1em の幅が 20px 未満の場合は、より狭くなります。言い換えれば、最大幅は 80px です。
対応バージョン：CSS3
ブラウザサポート
表内の数字は、その関数をサポートする最初のブラウザバージョンを示します。
| 関数 | |||||
|---|---|---|---|---|---|
| min() | 79.0 | 79.0 | 75.0 | 11.1 | 66.0 |
CSS 構文
min(value1, value2, ...)
| 值 | 説明 |
|---|---|
| value1, value2, ... | 必須。カンマ区切りの値のリストから最小値を選択します。 |
その他の拡張