【CSS】calc関数の指定方法・初心者向け（サンプルコードつき）

こんにちは！
「calc関数ってなに・・？」「便利になるの・・？」「使い方は・・？」

calc関数について良いかわからない、これから学びたいと思っている、初心者web制作者の方も多いのではないでしょうか？

calc関数は難しくありません。
簡単にいうと足し算、引き算、掛け算、割り算の4つを使用するだけです。

calc関数を使用する事ができれば、どの画面幅でも「文字の大きさ」「横幅」「高さ」などを思うとうりに指定する事ができ、webのレイアウト作成に役立ちます。加えて、自動で数値を計算してくれるので、効率的に作業をする事ができます。

今回は、初心者の方向けに、calc関数の基礎知識から使い方までを詳しく解説していきます。

calc関数とは？

calc関数とは、プロパティの値を計算式で求める事ができる関数です。
例えば、横幅指定、「width: calc（100px – 80px);」で横幅20pxを指定できる、
これがcalc関数です。

ただし上記のような指定の場合は、あまりありません。
理由は、計算しなくても、最初から20pxって書けば良いからです。

よく使われる場面でわかりやすい例は、%からpxを引く場面です。

例えば、横幅（画面幅）100%に、背景色赤色を指定

どんな画面幅からでも、100px分だけ、背景色の横幅を短くしたい。
しかし画面幅はブラウザの収縮によって変わってしまう、そんな時、
width: calc(100% – 100px)を指定する事で、ブラウザを収縮しても、自動的に下記のように100pxを引いた値を計算してくれます。

calc関数の基礎知識

使用できる計算式

使用できる計算式は、四則計算（加+)・(減-)・(乗*)・(除/）、
足し算、引き算、掛け算、割り算の4つとなります。

使用できる型

<length>（長さ）、<frequency>（周波数）、<angle>（角度）、<time>（時間）、<number>（数値）、<integer>（整数）
を使用する場所なら利用できます。

calcを使用できるプロパティ

「width」「height」「margin」「padding」「border-width」「font-size」「text-shadow」「transform」「animation」「transition」
上記プロパティであれば使用可能です。

calcの使い方

基本的な使い方

四則計算（加+)・(減-)・(乗*)・(除/）の記号を使います。

上記が基本です。
「＋、ー」を」使用する場合は、半角スペースを必ず挿入しなければなりません。
「*,/」に関しては、半角スペースは、マストではありませんが、ソースコードのみやすさ、統一性のためにも、半角スペースは、入れておいた方が良いでしょう。

異なる単位の使用

calc関数では、異なる単位の数値を組み合わせて計算する事ができます。

相対値（vh, vw, %）絶対値（px）を組み合わせる事ができます。

calc計算の優先順位

calc計算の優先順位は、学校で習った通り、「（加+)・(減-)」よりも(乗*)・(除/）
の方が優先されます。

ただしこちらも学校と同じ、括弧を使えば優先順位を変更する事ができます。

calcの入れ子

calcは、入れ子にして使用する事ができます。

calcこんな場面に便利

ビューポートで便利

ビューポートとは、日本語訳するとす「表示領域」の事で、ブラウザで表示される領域の事です。

この画面の大きさは見る端末（ディバイス）やブラウザの引き伸ばしによって変わってきます、pcとスマホでは画面の大きさが違います。
calcを指定する事でどの端末にであっても、同じ割合で表示してくれます。

文字の大きをcalcで指定

画面幅に合わせて文字の大きさを設定します。

サンプルコード表示動画

HTMLサンプルコード

<p class="sample">文字の大きさが変わる</p>

1	<p class="sample">文字の大きさが変わる</p>

CSSサンプルコード

.sample {
   font-size: calc(100vw / 20);
}

.sample {

font-size: calc(100vw / 20);

}

※解説
画面のブラウザサイズによって、文字の大きさを変える事ができています。
横幅の100vw（横幅全体）のビューポート（表示領域）に対して、20で割った値がどの画面でも適用されています。

横幅をcalcで指定

ブラウザ画面幅に応じて要素に左右均等の幅を作る事ができています。

サンプルコード表示動画

HTMLサンプルコード

<div class="box"></div>

1	<div class="box"></div>

CSSサンプルコード

.box {
   margin: 0 auto;
   width: 300px;
  height: 100px;
  background-color: blue;
   border: solid 1px #000;
   width: calc(100% - 100px);
}

.box {

margin: 0 auto;

width: 300px;

height: 100px;

background-color: blue;

border: solid 1px #000;

width: calc(100% - 100px);

}

※解説
どの画面幅でも常に100px分の余白をつけ、かつ真ん中に表示する事ができています。
これは、calc関数で画面幅100%から、100pxを引いた結果を表示させているからです。

3等分など均等割り算に便利

横幅100%を3等分にする事ができます。

サンプルコード表示動画

HTMLサンプルコード

<div class="box"></div>

1	<div class="box"></div>

CSSサンプルコード

.box{
  width: 300px;
  height: 100px;
  background-color: blue;
   width: calc(100% / 3);
  
}

.box{

width: 300px;

height: 100px;

background-color: blue;

width: calc(100% / 3);

}

※解説
どの画面幅でも、ブロックを3分の1で表示する事ができています。
これは、calc関数で横幅100%を3で割った結果を表示しているからです。

対応ブラウザ

calc関数は、Opera　Mini以外のほとんどの主要ブラウザで対応しています。
IE9以前の古いバージョンのブラウザに対してもベンダーフフレックスをつけることで対応する事ができます。
ほとんんどのブラウザで使用可能なので、積極的に気にせず使用する事ができます。

まとめ

今回は、初心者の方向けに、calc関数の基礎知識から使い方までを詳しく解説していきました。
最後にポイントをまとめます。

1.calc関数とは
プロパティの値を計算式で求める事ができる関数

2.使用できる計算式は
四則計算（加+)・(減-)・(乗*)・(除/）

3.使用できる型は
<length>（長さ）、<frequency>（周波数）、<angle>（角度）、<time>（時間）、<number>（数値）、<integer>（整数）

4.calcを使用できるプロパティは
「width」「height」「margin」「padding」「border-width」「font-size」「text-shadow」「transform」「animation」「transition」

5.基本的な使い方
四則計算（加+)・(減-)・(乗*)・(除/）の記号を使い。
calc(値（+,-,*,/）値);

6.calc計算の優先順位は
学校で習った計算式「（加+)・(減-)」よりも(乗*)・(除/）
の方が優先される

7.calc関数のブラウザ対応は
Opera　Mini以外のほとんどの主要ブラウザで対応している

いかがだったでしょうか？
関数というと少し難しく感じたかもしてませんが、足し算、引き算、掛け算、割り算の4つを使用するだけです。
calc関数を使用する事ができれば、どの画面幅でも「文字の大きさ」「横幅」「高さ」などを思うとうりに指定する事ができ、webのレイアウト作成に役立ちます。加えて、自動で数値を計算してくれるので、効率的に作業をする事ができますので積極的に使用してみてください。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。