CSS数学関数
CSS数学関数を使用すると、数式をプロパティ値として使用できます。calc()ここでは、、、
max()およびmin()関数について説明します。
calc（）関数
このcalc()関数は、プロパティ値として使用される計算を実行します。
CSS構文
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
例を見てみましょう：
例
calc（）を使用して、<div>要素の幅を計算します。
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
max（）関数
このmax()関数は、コンマで区切られた値のリストからの最大値をプロパティ値として使用します。
CSS構文
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
例を見てみましょう：
例
max（）を使用して、＃div1の幅を最大値（50％または300px）に設定します。
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
min（）関数
このmin()関数は、コンマで区切られた値のリストからの最小値をプロパティ値として使用します。
CSS構文
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
例を見てみましょう：
例
min（）を使用して、＃div1の幅を最小値（50％または300px）に設定します。
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
すべてのCSS数学関数
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |