CSSで計算式を可能にするcalc()ファンクション

CSSで演算というと、SaccやLessといったメタ言語を使うというイメージですが、単純な四則演算であれば、CSS3の「calc()」機能で代用出来ます。
IEはIE9からサポートしていましたが、他のブラウザーのサポートが中々進まなかったことから、余り使われてきませんでしたが、widthなどを%で指定する事が一般的になって来た現在、限定的ではありますが使い所はあるので、覚えておきましょう。

f:id:yachin29:20160706234454j:plain

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は３つ共同じ幅で可変
・子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は３つ共同じ幅で可変<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>

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

CSSで計算式を可能にするcalc()ファンクション

演習問題