SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2021.01.07
  • CATEGORY
TITLE

【CSS】calc関数の使い方 プロパティ値の計算を行う

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

CSS関数とは

CSS関数とは

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

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

calc()関数とは

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);
}
指定できる値
  • 加算(+)
    加算を行います
  • 減算(-)
    減算を行います
  • 乗算(∗)
    乗算を行います、引数の少なくとも1つは数値を指定します
  • 除算(/)
    除算を行います、右側は数値を指定します

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
ベンダープレフィックス
  • -webkit-
    Chrome、Safari、
    ※Operaは元は「-o-」でしたが、現在は「-webkit-」になってます
  • -moz-
    Firefoxになります
  • -ms-
    Internet Explorer、Microsoft Edgeになります

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

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

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

calc()関数で指定すると以下のようになります。
calc(100% / 3)と記述します、除算で指定し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()関数についてまとめてみました。

POINT
  • calc()を使うことで、計算を実行をしたり、条件を指定したりすることができます。
  • 計算とは、主に加算・減算・乗算・除算が行えます。
  • ※演算子(+, -, *, /)は前後にスペースを開けて指定を行います。
  • 「加算(+)、減算(-)」よりも「乗算(*)、除算(/)」が優先されます。
  • calcの計算の優先順位を理解しておきましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top