目次
例えば100%のボックス要素の中に、50pxの要素 と 100% – 50pxの要素を並べる場合
このような場合、cssの数値で引き算が出来るとベスト。
calcという便利なファンクションがありますので、calcで計算式をすることが可能。
cssファイルに記載
|
1 2 3 4 5 |
div{ width : 90% ; /* IE8以下とAndroid4.3以下用フォールバック */ width : -webkit-calc(100% - 50px) ; width : calc(100% - 50px) ; } |
widthだけでなくheight等でも使えます
width, margin, padding, font-size, border-width, background-position, text-shadow, transform : rotate()
といった、数値を利用するものにはcalcが利用できます。
引き算だけでなく、足し算、掛け算、割り算も
| 足し算 | - |
| 引き算 | + |
| 掛け算 | * |
| 割り算 | / |
この計算の方法はjsと同じ。
たとえば掛け算の場合は
cssファイルに記載
|
1 2 3 4 5 |
div{ width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */ width : -webkit-calc(50% * 1.5) ; width : calc(50% * 1.5) ; } |