CSSで演算というと、SaccやLessといったメタ言語を使うというイメージですが、単純な四則演算であれば、CSS3の「calc()」機能で代用出来ます。
IEはIE9からサポートしていましたが、他のブラウザーのサポートが中々進まなかったことから、余り使われてきませんでしたが、widthなどを%で指定する事が一般的になって来た現在、限定的ではありますが使い所はあるので、覚えておきましょう。
Opera Miniは相変わらずですが、主要ブラウザーはすべて使えます。
calc()の1番の使い所はやはり、%指定の横幅に対して固定値のマージンを指定したい時です。
例えば横幅100%のboxに20px分のmarginを取りたい時は
.box { width: calc(100% - 20px); /* 演算子 の両サイドのスペースは必要*/ }
他にも親要素の中にboxを均等に6個並べたい時なども従来の計算方式だと、100%÷6=16.666...7%と非常に中途半端な値になってしまいますが、このcalc()を使えば
.box { width: calc(100% / 6);
で均等に並ばせる事が出来ます。
演習問題
・親BOXの幅はbodyの70%
・子BOXは3つ共同じ幅で可変
・子BOXのマージンは固定で20px
・子BOXの高さは300pxで固定
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>可変BOXに固定値のマージン指定</title> <style> #container { background: #999; width: 70%; margin: 50px auto 0; overflow: hidden; padding: 10px; } .box { background: #06F; width: calc(100% / 3 - 20px); /* 演算子 の両サイドのスペースは必要*/ margin: 10px; height: 300px; float: left; } p { margin-left: 50px; font-size: 18px; } </style> </head> <body> <h1>可変BOXと固定マージン</h1> <p>今回の仕様<br> ・親BOXの幅はbodyの70%<br> ・子BOXは3つ共同じ幅で可変<br> ・子BOXのマージンは固定で20px<br> ・子BOXの高さは300pxで固定 </p> </ul> <div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>