CSS calc()関数

CSS calc()関数の操作方法を学ぶ

ザ・calc()関数を使用すると、値に対して基本的な数学演算を実行できます。これは、パーセンテージから長さの値を加算または減算する必要がある場合に特に便利です。

これがその仕組みです:

div {
	max-width: calc(80% - 100px)
}

長さの値を返すため、ピクセル値が必要な場所ならどこでも使用できます。

あなたが実行することができます

  • を使用した追加+
  • を使用した減算-
  • を使用した乗算*
  • を使用した除算/

注意点:加算と減算では、演算子の周囲のスペースは必須です。そうしないと、期待どおりに機能しません。

例:

div {
	max-width: calc(50% / 3)
}
div {
	max-width: calc(50% + 3px)
}

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: