calc関数とは何？CSS初心者でも分かる使い方も解説！

みなさんはCSSの学習をしていませんか？

CSSを学習する時にcalc関数が使えることで幅が広がります。

今回の「DMM WEBCAMP MEDIA」ではcalc関数の使い方を解説します！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

calc関数とは？

CSSでコーディングをしている時、「px」や「%」を使ってコンテンツ幅や高さのサイズ指定することが多いですが、CSS3の「calc()」関数が実装され、プロパティの値を計算式で求めることが可能となりました。

いままで、パターン毎に数値を用意したり、パーセントで調整したりしていましたが、よる柔軟に設定することができてとても便利です。
今回はcalc関数についてご紹介します。

仕様

使用できる演算子は四則計算、加算（+）、減算（-）、乗算（*）、除算（/）になります。

<length>（長さ）、<frequency>（周波数）、<angle>（角度）、<time>（時間）、<number>（数値）、<integer>（整数） 型の値について演算を使用できます。

逆に言えばそれ以外の場所では使えませんので注意が必要です。（たとえば、Colorプロパティの値など）

記述方法

基本的な記述方法は下記のようになります。

section {
width: calc(100%/3 - 2*1em - 2*1px);
}

この時、加算と減算 （+, -） に関しては演算子の前後に半角スペースを必ず入れなければなりません。

乗算と除算 （*, /） に関しては前後の半角スペースについて任意ですが、ソースの統一性やミスを防ぐためにも記述上は前後に半角スペースを入れておくほうが懸命かと思います。

計算の優先順位

calc() 関数による四則計算の優先順位は学校で習うとおりです。

計算順序を指定するために 「括弧（）」 を使用することができます。

calc(500 – 10 * 20 – 10 / 2)

上記の記述の場合、500 – 200 – 5 ということになります。例えば加算、減算を優先的に計算したければ calc((500 – 10) * (20 – 10) / 2) のように記述する必要があります。

ただし、乗算を使用する場合は少なくとも１つは「数量」でなくてはならない、除算を使用する場合は演算子の右の値が「数量」でなくてはならないという決まりもあります。

異なる単位の計算

calc関数の計算では、異なる単位の数値の計算を行うことができます。具体的には、相対単位（%やvw, vhなど）と絶対単位（pxなど）を組み合わせることができます。

.foo {
width: calc(100% - 50px);
}

この例では幅いっぱい（100%）から、50pxの固定幅を引いた数値を指定しています。サイドバーのレイアウトなどによく使う記述です。

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

「calc()」は計算された値は計算式自体であり、結果の値ではない

CSSプリプロセッサで計算式を扱う場合、ブラウザに与えられる値は式の結果の値です。
たとえば、

.foo {
width: 100px + 50px;
}

の場合には、

.foo {
width: 150px;
}

がブラウザに渡されます。

しかし、「calc()」ではブラウザによって解析された値が実際の「calc()」の計算式です。

.foo {
width: calc(100% - 50px);
}

これはブラウザにおける値がより動的になり、ビューポートの変更に合わせて適応できることを意味します。
例えば、ビューポートの高さから絶対値を引いた要素をビューポートの変更に合わせて適応させることができます。

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

「calc()」の入れ子

「calc()」の計算式は、入れ子で利用できます。
ただし、内部関数は単純なかっこ式として扱われます。

.foo {
width: calc( 100% / calc(100px * 2) );
}

上記の「calc()」の入れ子の計算式の計算値は下記のようになります。

.foo {
width: calc( 100% / (100px * 2) );
}

まとめ【CSScalc関数を使っていこう】

CSS側で柔軟に対応できるcalc関数はCSS3の中でもとても有効な機能の一つです。

レイアウトデザイン上でも重要な役割を今後担う機能ですので、ぜひ活用してください。

【初心者必見】CSS3って何？CSSとの違いやHTML5との関係を徹底解説