cssで計算ができる calc()
hongkiat.comさんより
整数値を設定できるプロパティに対して、+, -, *, / の計算式を用いていろいろな計算ができるようです。
長さ、周波数、角度、時間、回数など、整数で指定できる値では比較的使用可能な様子。
IE8以下とAndroidはサポート対象外だそうです。解釈など間違っていたらご指摘お願いしますm(_ _)m
親のwidthを基準として子のwidthを設定し、かつ数ピクセル加算したり減算したりする
子要素の幅を親要素の幅の何パーセントで設定する、というのは普通に出来ますが、calc()を使えば それに何ピクセルプラスする、マイナスする、ということができます。 もちろん、親要素の大きさを変えれば子要素も同様に変わります。
サンプルhtml
--[ html ]----------------------- <div id="addition300px"> <div class="add0px">親要素のwidthの70%</div> <div class="add5px">親要素のwidthの70% + 5px</div> <div class="sub5px">親要素のwidthの70% + 5px</div> <div class="add23px">親要素のwidthの70% + 23px</div> <div class="sub23px">親要素のwidthの70% + 23px</div> </div> --[ CSS ]------------------------ #addition300px{ position:relative; background:#ccc url(../img/bg_trans.gif) repeat; width:300px; border:2px solid #333; } #addition300px:after{/*ここは実際は必要ありません*/ content:""; position:absolute; top:0; left:0; display:block; width:70%; height:100%; background:#cff; z-index:0; } #addition300px div{/*ここは実際は必要ありません*/ position:relative; z-index:1; } .add0px{ background:#cff; width:70%; } .add5px{ background:#fcc; width:-webkit-calc(70% + 5px); width:-moz-calc(70% + 5px); width:calc(70% + 5px); } .add23px{ background:#fcc; width:-webkit-calc(70% + 23px); width:-moz-calc(70% + 23px); width:calc(70% + 23px); } .sub5px{ background:#ccf; width:-webkit-calc(70% - 5px); width:-moz-calc(70% - 5px); width:calc(70% - 5px); } .sub23px{ background:#ccf; width:-webkit-calc(70% - 23px); width:-moz-calc(70% - 23px); width:calc(70% - 23px); }
子要素のフォントサイズを親の2倍で指定する。
calc()はfont-sizeにも指定できます。 下のサンプルは親要素でfont-sizeを10pxに指定していますが、calc()によって子要素が親の2倍の大きさになるようにしています。 calc()で指定してあるものに関しては、親要素のfont-sizeを変更すると子要素もそれに従い変化します。
サンプルhtml
--[ html ]----------------------- <div id="multiplication"> 親要素 font-size:10px; <div class="nonmulti">子要素 font-size:20px; </div> <div class="multi2x">子要素 親のfont-sizeの2倍(要は20px);</div> </div> --[ CSS ]------------------------ #multiplication{ font-size:10px; } #multiplication .nonmulti{ font-size:20px; } #multiplication .multi2x{ font-size:-webkit-calc(1em * 2); font-size:-moz-calc(1em * 2); font-size:calc(1em * 2); }
子要素を3等分に分割する
親要素の幅を100%として、子要素をその中で3等分の幅にして並べます。
サンプルhtml
--[ html ]----------------------- <div id="division"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> </div> --[ CSS ]------------------------ #division div{ width: -webkit-calc(100% / 3); width: -moz-calc(100% / 3); width: calc(100% / 3); float: left; height: 100px; color: #fff; } #division .one {background: #333;} #division .two {background: #666;} #division .three {background: #999;}
いろいろミックス1
足したり引いたり掛けたり割ったり、組み合わせも自由なようです。 下のサンプルでは、分数のような形で、親要素に対して左側を1/5幅,右側を4/5幅にしています。 親の幅を変更すれば、同じ比率で子要素も変化します。
サンプルhtml
--[ html ]----------------------- <div id="mix1"> <div class="left">1</div> <div class="right">2</div> </div> --[ CSS ]------------------------ #mix1{ border:1px solid #000; width : 500px ; float:left; } #mix1 .left { float:left; background:#666; width : -webkit-calc(100% * 1/5) ; width : -moz-calc(100% * 1/5) ; width : calc(100% * 1/5) ; } #mix1 .right { float:left; background:#999; width : -webkit-calc(100% * 4/5) ; width : -moz-calc(100% * 4/5) ; width : calc(100% * 4/5) ; }
いろいろミックス2
W3Cさんのサイトで載っていたものをそのまま書いて見ました。 なんだかいろいろできるみたいですねえ。。
サンプルhtml
--[ html ]----------------------- <div id="mix2"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> </div> --[ CSS ]------------------------ #mix2 div{ margin: 1em; border: solid 1px; float:left; width: -webkit-calc(100%/3 - 2*1em - 2*1px); width: -moz-calc(100%/3 - 2*1em - 2*1px); width: calc(100%/3 - 2*1em - 2*1px); }