【CSS】calc()を使って計算で横幅や縦幅のサイズを指定する

公開日：2017/06/02

更新日：2017/06/01

カテゴリー: HTML・CSS

CSSをコーディングするとき、横幅や縦幅のサイズを計算で指定できたらいいのになーと思ったことはありませんか？

それCSS3のcalc()ファンクションを使えば実装可能です。

計算でサイズを指定する

横幅を常に100%より6px小さいサイズにしたい場合、calc()ファンクションを使って次の計算式をあててあげればよいです。

.sample{
	width: calc(100% - 6px);
}

計算の必要性

これだけだとcalc()ファンクションの有能さがわからないと思うのでもう少し具体的に説明したいと思います。

.parent{
	width: 700px;
	height: 100px;
	margin: 0;
	padding: 0;
	border: none;
}

例えば、上のCSSをもつ横幅が700pxの親要素「.parent」に次のCSSを持つ子要素「.child」を入れます。

.child{
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0;
	border: none;
}

すると、この場合次のようにすっぽりと親要素に子要素が入ります。

しかし、子要素に次のようにborderプロパティを指定すると、

.child{
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0;
	border: 3px #ff0000;
}

子要素は次のように親要素からはみ出ます。

これはなぜか？それはブロックの幅はwidthプロパティだけでなく

width + margin + padding + border

が足し合わさったサイズになるからです。

つまり、上記の場合だと3pxのborderの左右分すなわち6px分がはみ出るわけです。

こういう場合に次のようにcalc()ファンクションを使用すると、

.child{
	width: calc(100% - 6px);
	height: 50px;
	margin: 0;
	padding: 0;
	border: 3px solid #000000;
}

すっぽりと親要素に収まって意図したデザインにできます。

もうお分かりだと思いますが、calc()ファンクションは計算でサイズを指定することができるので、あらかじめ絶対値である数値を引いてあげるといかなるサイズ（レスポンシブ）にも対応できるのです。

レスポンシブデザインが要求される現在のウェブサイト作成においてかなり重宝できる機能です。

calc()ファンクションの詳細

calc()ファンクションで「使用できる演算」「対応ブラウザ」についてまとめます。

使用できる演算

calc()ファンクションは次の4つの演算を使用できます。

+：足し算
-：引き算
*：掛け算（計算には最低一つは単位のない数値を指定）
/：割り算（一番右にくるものは必ず単位のない数値を指定）

※足し算・引き算は「3px + 4px」「90% - 6px」など単位を持つ数値同士で計算できますが、掛け算は「2px * 3」「4% * 5」のように最低一つは単位を持たない数値を用いなければなりません。同様に、割り算も「 100px / 2」「40px / 5」のように一番右にくるものは必ず単位を持たない数値にしなければなりません。

※px、%以外にもemやremなどの単位も使用可能

※計算順序を明示する「()」もcalc()の中で使用可能

※calc()の中でcalc()も使用可能

対応ブラウザ

こちらを見てもらえればわかりますが、calc()ファンクションは全てのメジャーブラウザに対応しています。

また、androidブラウザ4.4未満とiOSブラウザSafariの10未満などには未対応ですが、いずれもwebkit系のHTMLレンダリングエンジンなのでベンダープレフィックスを次のように用いれば対応可能にできます。

.sample{
	width: -webkit-calc(100% - 6px);	/* webkitのベンダープレフィックス */
	width:         calc(100% - 6px);	
}

なお、IE9未満などのcalc()ファンクションに対応していないブラウザも守備範囲内に入れたい場合は、次のようにします。

.sample{
	width: 95%;	/* calc()ファンクションに未対応なブラウザ用（数値は実装環境に適するものを指定） */
	width: -webkit-calc(100% - 6px);
	width:         calc(100% - 6px);	
}

calc()ファンクションの使いどころ

calc()ファンクションの使いどころをざっくりとまとめたいと思います。

3分割表示

CSSでコーディングをする際によく分割表示をしますが、4分割などの場合は

.box{
	width : 25%;
}

のように100%を割り切れて気持ちのいいコーディングができますが、3分割の場合は

.box{
	width : 33%;
}

と神経質な私は無性に残り1％が気になります。

こういう時にcalc()ファンクション使うと

.box{
	width : calc(100% / 3);
}

で気持ちよく次の作業に移れます。

なお、webkitのベンダープレフィックスとcalc()ファンクションに未対応なブラウザも守備範囲に入れる場合には

.box{
	width : 33%;
	width: -webkit-calc(100% / 3);
	width :        calc(100% / 3);
}

とすればよいです。

レスポンシブ対応の吹き出し

calc()で計算してレスポンシブ対応させるお！

実はこの会話用吹き出しはレスポンシブ対応させているのですが、これにもcalc()ファンクションを使っています。

本当はもう少しちょこちょこと装飾があるのですが、説明のためにかなりシンプルにCSSを記述します。

.fukidashi{
	position: relative;
	width: calc(100% - 120px);
	box-sizing: border-box;
	padding: 15px;
	border: 2px solid #999;
}
.fukidashi::after{
	position: absolute;
	content: "";
	width: 100px;
	height: 100px;
	top: -20px;
	right: -120px;
	border: 3px solid #fff;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image:url(images/yaruo-kihon.png);
}

3行目にcalc()ファンクションを使っており、

width: calc(100% - 120px);

としています。

14行目の「right: -120px;」を指定しなければ下の画像のようになりますが