CSS 数学関数
CSS数学関数を使用すると、数式をプロパティ値として使用できます。ここでは、calc()、max()、min()関数について説明します。
calc()関数
calc()関数は、プロパティ値として使用される計算を実行します。
CSS構文
calc(計算式)
|
値 |
説明 |
|---|---|
| 計算式 | 必要。数式。結果が値として使用されます。 次の演算子を使用できます: + - * / |
例を見てみましょう
例
<div>要素の幅を計算するには、calc()を使用します。
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
max()関数
max()関数は、値のコンマ区切りリストから最大値をプロパティ値として使用します。
CSS構文
max(値1, 値2, ...)
|
値 |
説明 |
|---|---|
| 値1、値2、... | 必要。カンマ区切り値のリスト - 最大値が選択されます |
例を見てみましょう：
例
max()を使用して#div1の幅を50%または300pxのいずれかで大きい値に設定します。
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
min()関数
min()関数は、値のコンマ区切りリストから最小値をプロパティ値として使用します。
CSS構文
min(値1, 値2, ...)
|
値 |
説明 |
|---|---|
| 値1、値2、... | 必要。カンマ区切り値のリスト - 最小値が選択されます |
例を見てみましょう
例
min()を使用して #div1の幅を50%または300pxのいずれか小さい値に設定します。
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
すべてのCSS数学関数
|
関数 |
説明 |
|---|---|
| calc() | CSSプロパティ値を決定するための計算を実行できます |
| max() | カンマで区切られた値のリストの最大値をプロパティ値として使用します |
| min() | カンマで区切られた値のリストからの最小値をプロパティ値として使用します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。