【CSS】calc()関数で簡単サイズ指定

今回はcalc()関数についてご紹介します。
calc()関数とはCSSでサイズ指定するための関数です。
calc()関数の「calc」とは「colculation(計算)」の略称で、名前の通りサイズ指定の際に計算式が使える関数です。
この関数のすごいところは異なる単位でも計算ができるところです。
例：横幅100％から50px引くなど

使用できる計算式は以下の通りです。

• 足し算（+）
• 引き算（-）
• 掛け算（*）
• 割り算（/）

足し算・引き算よりも掛け算・割り算の方が優先されるので注意してください。

書き方はwidth・heightやfontなどのサイズ指定の箇所にcalc()を入れ、（）の中に計算式を書きます。
例：width: calc(100% + 150px);
※「+」などの左右は半角スペースを入れてください。

それぞれの計算を使うとどのようになるか見てみましょう。
今回はわかりやすいように横300px ✕ 縦100pxの中に作っています。

足し算

横幅100％（今回は300px指定）から150px足したので横幅450pxになりました。

See the Pen
Untitled by 2 (@nakagawa1213)
on CodePen.

引き算

横幅100％（今回は300px指定）から150px引いたので横幅150pxになりました。

See the Pen
Untitled by 2 (@nakagawa1213)
on CodePen.

掛け算

横幅100％（今回は300px指定）の2倍にしたので横幅600pxになりました。

See the Pen
calc_* by 2 (@nakagawa1213)
on CodePen.

割り算

横幅100％（今回は300px指定）の1/2にしたので横幅150pxになりました。

See the Pen
calc_/ by 2 (@nakagawa1213)
on CodePen.

複数の計算

複数の計算も可能です。
横幅100％（今回は300px指定）から50pxの2倍である100pxを引くので200pxになります。
※掛け算の方が優先されます。

See the Pen
calc_複数 by 2 (@nakagawa1213)
on CodePen.

入れ子の計算

入れ子の計算も可能です。
横幅100％（今回は300px指定）の1/4の2倍なので2/4（150px）になります。

See the Pen
calc_入れ子 by 2 (@nakagawa1213)
on CodePen.

応用

計算の仕方がわかったのでレイアウトに応用してみましょう。

幅が均等な数値に割り切れない場合

幅100％に対して3等分を指定する際に活用できます。
100％の1/3の幅の数値は33.33…となり数値を入力するのに困ります。
ですが「width: calc(100% / 3)」を指定すれば均等に3等分にしてくれます。

See the Pen
calc_3等分 by 2 (@nakagawa1213)
on CodePen.

固定幅と可変幅を並べる

例えば左右に並べたコンテンツを右は固定の幅、左は可変の幅にしたい場合に活用できます。
右に固定する幅としてwidth: 100pxを入れ、左に可変する幅としてwidth: calc(100% – 100px)を入れる。
width: calc(100% – 100px)はすべての横幅から右幅の100px分を引いた幅になります。
この方法はサイドバーを作るのにも役立ちます。

See the Pen
Untitled by 2 (@nakagawa1213)
on CodePen.

要素を上下左右に中央揃え

要素を上下左右に中央揃えにする際にも活用できます。
方法としてpositionを使ってtop:50%;とleft:50%;を指定し、marginで微調整するかと思います。
ですがtopとleftの値にcalc(50% – 動かしたい数値);を入れればmarginを書かなくて済みます。

See the Pen
calc_center by 2 (@nakagawa1213)
on CodePen.

フォントサイズ

フォントサイズにも使えるので大きさを微調節したいときにも活用できます。

See the Pen
calc_ font by 2 (@nakagawa1213)
on CodePen.

まとめ

calc()関数を使うといつもよりサイズ指定が楽になるかもしれませんね！
ぜひお試しください。