シュウ

今回は【CSS】cale関数の使い方 プロパティ値の計算を行うの解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• calc関数について学びたい方へ
• 今回はcalc関数でプロパティ値の計算をする解説になります

calc()関数を使うことで、計算を実行をしたり、条件を指定したりすることができます。
計算とは、主に加算・減算・乗算・除算が行えます。

CSS関数とは

CSS関数とは、次のように関数名と引数で構成されます。

関数名
どのような関数を実行するかを決めるキーワードになります。
引数
CSS関数に渡す値のことです。使用できる値は関数によって違います。

calc()関数とは

calc()関数を使うことで、計算を実行をしたり、条件を指定したりすることができます。
計算とは、主に加算・減算・乗算・除算が行えます。
※演算子（+, -, *, /）は前後にスペースを開けて指定を行います。
書き方は以下のようになります

/*--加算(+)--*/
プロパティ {
	width:calc(100px + 50px);
}

/*--減算(-)--*/
プロパティ {
	width:calc(100% - 50px);
}

/*--乗算(∗)--*/
プロパティ {
	width:calc(100px * 5);
}

/*--除算(/)--*/
プロパティ {
	width:calc(100px / 2);
}

/*--前後にスペースを開けます OK例--*/
プロパティ {
	width:calc(100% - 50px);
}

/*--前後にスペースを開けていない NG例--*/
プロパティ {
	width:calc(100%-50px);
}

calcの計算の優先順位について

calcの計算には「優先順位」があります。
「加算(+)、減算(-)」よりも「乗算(*)、除算(/)」が優先されます。
下記の場合、「100% – 10px」より先に「10px / 3」が計算されます。

 /*--優先順位について--*/
プロパティ {
	width: calc(100% - 10px / 3 );
}

括弧を追加し優先順位を変更

「括弧（）」を追加すれば、優先順位を変更することができます。
下記の場合、「100% – 10px」が先に計算されます。
※ゼロ(0)で割らないようにしましょう。

 /*--優先順位について--*/
プロパティ {
	width: calc((100% - 10px) / 3 );
}

/*--NG ゼロで割らないように--*/
プロパティ {
	width: calc(100% / 0);
}

入れ子について

calcは入れ子にして指定も可能です。

 /*--優先順位について--*/
プロパティ {
	width: calc((100% / 3) * 2);
}

古いブラウザについて

calc()関数は、ほとんどのブラウザで対応はしておりますが、一部のブラウザでは対応されておりません。
calc()関数が適用されない場合はベンダープレフィックスを使用しましょう。

 /*--ベンダープレフィックスについて--*/
プロパティ {
    width: 33.33333%; /* 非サポートブラウザ用のフォールバック */
    width:  -webkit-calc(100% / 3);
    width: calc(100% / 3);
}

「Can I use」(https://caniuse.com/)では、対象のブラウザでベンダープレフィックスが必要かどうかを確認してくれます。
黄色枠に対象となるCSSを入力してください。

• Can I use「calc()」

3カラムレイアウトでの指定

今回は一つの例として、3カラムレイアウトでcalc()関数を使い指定を行います。
親要素のコンテンツ幅100%に対して、3カラムレイアウトの場合は、
「width:33.3333%」に指定をしていました。

calc()関数で指定すると以下のようになります。
calc(100% / 3)と記述します、除算で指定し3カラムにしています。

<div>
<div class="item">①</div>
<div class="item">②</div>
<div class="item">③</div>
</div>

 /*--親要素--*/
.flex-container {
	display: flex;
}

/*--3カラムレイアウト--*/
.item {width: calc(100% / 3);}

 /*--2カラムレイアウトの場合--*/
.item {width: calc(100% / 2);}

*--4カラムレイアウトの場合 など--*/
.item {width: calc(100% / 4);}

余白の指定

先ほど例であげた、3カラムレイアウトをcalc()関数で指定を行い、
「30px * 2 = 60px」を行い、「100% – 60px」を引いて3で割った値になります。
最後は「margin」で余白を開けています。

<div>
<div class="item">①</div>
<div class="item">②</div>
<div class="item">③</div>
</div>

 /*--親要素--*/
.flex-container {
	display: flex;
}

/*--3カラムレイアウト--*/
.item {
	width: calc((100% - 30px * 2) / 3);
	margin: 0 10px;
}

まとめ

今回はこれで以上です。
簡単にcalc()関数についてまとめてみました。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】グリッドやアイテムの位置・方向を指定する!番外編

次の記事 >

【CSS】2カラムデザイン 固定と可変をcalc関数で指定する!