超簡単!CSSで引き算をして横幅【width】を指定する方法・ファンクション”calc”

2018/2/18 CSS

例えば100%のボックス要素の中に、50pxの要素 と 100% – 50pxの要素を並べる場合

このような場合、cssの数値で引き算が出来るとベスト。

calcという便利なファンクションがありますので、calcで計算式をすることが可能。

cssファイルに記載

これでOK!!簡単ですね。

widthだけでなくheight等でも使えます

width, margin, padding, font-size, border-width, background-position, text-shadow, transform : rotate()

といった、数値を利用するものにはcalcが利用できます。

引き算だけでなく、足し算、掛け算、割り算も

足し算 -
引き算 +
掛け算 *
割り算 /

この計算の方法はjsと同じ。

たとえば掛け算の場合は

cssファイルに記載

となります。

投稿者:気まぐれWEBLOG管理人