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

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

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

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

cssファイルに記載

div{
   width : 90% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 50px) ;
   width : calc(100% - 50px) ;
}

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

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

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

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

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

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

たとえば掛け算の場合は

cssファイルに記載

div{
   width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(50% * 1.5) ;
   width : calc(50% * 1.5) ;
}

となります。