サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】
初心者向けにCSSでcalc()を使う方法について実際にソースコードを書きながら解説しています。レイアウトの調整やサイズ指定などを行う際に便利なメソッドです。応用的な使い方になりますが、作業効率も上がるので、覚えておくと便利でしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
井上 祐介
CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。
異なる単位で複雑な計算も簡単に指定できます。
レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。
目次
- calcファンクションとは
- calcファンクションを使うメリット
- calcファンクションの書き方
- calcファンクションの実装例
- 【参考】CSSで変数を使う
- calcファンクションの使用上の注意点
- まとめ
- CSSを学習中の方へ
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？
いろいろ方法があるけどcalcファンクションを使えば簡単だよ。
calc？CSSで計算ができるんですか？
その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。
へぇー。わかりやすいですね。
そうなんだ。まずはどういった記述の仕方をするか見てみよう。
はい！
calcファンクションとは
CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。
通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。
たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。
width: calc(100vw / 2 - 150px / 2);
height: calc(100vh / 2 - 150px / 2);このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。
calcファンクションを使うメリット
- 異なる単位で計算することができる
- 計算が明白になる
- calc()は結果の値ではない
異なる単位で計算することができる
CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。
異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。
%、em、pxなどいろいろな単位を組み合わせた計算が可能です。
たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。
このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。
計算が明白になる
calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。
たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。
固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。
calc()は結果の値ではない
calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。
たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。
calcファンクションの書き方
calcファンクションはCSSで値の代わりとして計算式を指定できます。
widthやheight、font-sizeなど値が指定できるところなら使えます。
構文
プロパティ（widthなど）: calc(式)四則演算が使用できる
指定する式では四則演算の演算子（+、-、*、/）が使えます。
前後に空白が必要
加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。
除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。
※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。
calcが利用できる場所
calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。
入れ子が可能
calcファンクションは入れ子にできます。
入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
calcファンクションの実装例
実際にcalcファンクションを使った実装例を見てみましょう。
ルートに基づいたサイズ指定
calcファンクションを使えば、フォントのサイズを相対的に指定できます。
たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。
スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。
ソースコード
「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。
ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>ルートに基づいたフォントサイズの指定</title>
</head>
<body>
<p>ルート（html）のフォントサイズ（15px）</p>
<p class="text_plus">大きめの文字（ルートフォントサイズの1.5倍）</p>
</body>
</html>html { font-size: 15px }
.text_plus { font-size: calc(1rem * 1.5) }表示結果
See the Pen
calc_font by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
html { font-size: 15px }ルート（html要素）のフォントサイズを15pxに設定しています。
.text_plus { font-size: calc(1rem * 1.5) }「text_plus」クラスの要素のフォントサイズをルート（html）要素の1.5倍になるようにcalcファンクションで計算します。
「rem」とはルート（html）要素のフォントサイズを基準としたサイズ指定の単位です。
現在の設定ではルート要素のフォントサイズは「15px」なので、「1rem」は「15px」、「2rem」だと「30px」になります。
まとめ
ルート要素を基準としてフォントサイズを設定するときは「font-size: calc(1rem * 倍数)」や「font-size: calc(11rem + サイズ)」などで相対的なフォントサイズを指定できます。
要素を3等分の幅にする
要素の幅を3等分や7等分にする場合、割り切れない割合のため直接値を指定するのは大変です。
calcファンクションを使えば、簡単に指定できるだけでなくプロパティに設定している意味がわかりすくなります。
ソースコード
画面幅いっぱいの領域に3等分の幅にしたli要素を配置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>要素を3等分の幅にする</title>
</head>
<body>
<ul>
<li>1列目</li>
<li>2列目</li>
<li>3列目</li>
</ul>
</body>
</html>body { margin: 0 }
ul {
padding: 0;
margin: 0;
display: flex; /* 子要素（li要素）を横並びにするため */
}
li {
width: calc(100vw / 3);
height: 50vh;
list-style:none; /* li要素のリストマークを表示しない */
}
li:nth-child(1){ background-color: #66ffff }
li:nth-child(2){ background-color: #6699ff }
li:nth-child(3){ background-color: #ccffcc }表示結果
See the Pen
calc_col3 by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
width: calc(100vw / 3);ブラウザの表示領域（ビューポート）の幅（単位 vw）を3等分した値に設定します。
「100vw」でブラウザの表示領域の幅全体を表すため、3等分なら「33.33333vw」などでも同じように見えますが、calcファンクションを使えば簡単に正確な値を指定できます。
ブラウザの表示領域いっぱいではなく、親要素を基準とした表示可能な領域で計算させる場合は「calc(100% / 3)」などで計算します。
100vwなのにスクロールバーが出る？
100vwはブラウザの表示領域の端から端までの幅を取得できますが、100vmと100%の幅の要素が縦に並んでいると水平スクロールバーが表示されて横にはみ出しているように見える場合があります。
横幅がいっぱいのはずの100vwで水平スクロールバーが表示されるのは、100vwだと垂直スクロールバーを無視した画面の幅を表しているからです。
垂直スクロールバーが表示されていないときは100vwと100%の幅が一致しますが、PCのブラウザで表示した場合などに垂直スクロールバーが表示されると100vwと100%の要素で幅が異なる場合が出てきます。
それで、スクロールバーの内側の領域を求めるときは100%、スクロールバーを含めた幅を求めるときは100vwを使用します。
ちなみに、垂直スクロールバーが表示されている場合のスクロールバーの幅は「calc(100vw – 100%)」で求められます。
まとめ
要素を3等分の幅にするには、ブラウザの表示領域いっぱいで分割するときは「width: calc(100vw / 列の数)」と指定します。
親要素の幅を基準として分割するには「width: calc(100% / 列の数)」と記述します。
左右のセンタリング
calcファンクションで要素を水平方向でセンタリングできます。
ブラウザの表示領域の幅か親要素を基準とした幅で中央に配置できます。
ソースコード
ページ全体で背景色が灰色の要素（id属性がheroinnerの要素）をセンタリングします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ヒーローヘッダーのフォント -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>左右のセンタリング</title>
</head>
<body>
<div id="hero">
<div id="heroinner">hero</div>
</div>
<div>
<p>id「heroinner」の要素を水平方向でセンタリングしています。</p>
</div>
</body>
</html>body{ margin: 0 }
#hero {
width: 100%;
height: 100vh;
background-color: #d1edfb;
}
#heroinner {
position: absolute;
left: calc(50% - 150px);
width:300px;
/* ヒーローヘッダー用のフォント設定 */
text-align: center;
font-family: 'Passion One', cursive;
font-weight: 400;
font-style: normal;
font-size: 120px;
color:#FFFFFF;
background-color: #000000;
opacity: 0.5; /* 要素全体を半透明にする */
}表示結果
See the Pen
calc_center by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
position: absolute;
left: calc(50% - 150px);要素の位置を指定するために、positionプロパティをabsoluteにします。
「50%」の位置は標準だとページ全体の真ん中の位置ですが、要素の配置は左上が基準になるため、そのまま配置すると要素の左端がページの真ん中にきてしまいます。
そこでセンタリングしたい要素をページ全体の左右の位置で真ん中に持ってくるため、センタリングしたい要素の半分の幅（150px）だけページ全体の真ん中（50%）の位置から左に（50% – 150px）寄せます。
absoluteとは？
positionプロパティで要素の配置を指定できるようにする方法のひとつで、ページ全体などの絶対的な位置を基準にした配置が指定できます。
配置の基準が決まっているabsoluteに対して、現在の位置を基準にした相対的な配置を指定するのがrelativeです。
標準ではページ全体（html要素、ブラウザの表示領域）の左上が配置の基準になっていますが、親要素にposition: relative;かposition: fixed;を指定すると親要素の左上を基準にして要素を配置できます。
まとめ
要素を左右でセンタリングするには、まず「position: absolute;」でページの左上を基準にした配置にします。
センタリングしたい要素の左位置を「left: calc(50% – センタリングしたい要素の半分の幅);」で指定します。
上下の中央配置
calcファンクションを使って垂直方向（上下方向）でも中央に配置できます。
基本的には水平方向と同じように中心（50% または 50vh）から配置したい要素の高さの半分を引けば位置が設定できます。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ヒーローヘッダーのフォント -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>上下で中央</title>
</head>
<body>
<div id="hero">
<div id="heroinner">hero</div>
</div>
<div>
<p>id「heroinner」の要素を垂直方向で中央に配置しています。</p>
</div>
</body>
</html>body{ margin: 0 }
#hero {
height: 100vh;
width: 100%;
background-color: #d1edfb;
}
#heroinner {
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 150px);
width:300px;
height: 120px;
/* ヒーローヘッダー用のフォント設定 */
text-align: center;
font-family: 'Passion One', cursive;
font-weight: 400;
font-style: normal;
font-size: 120px;
color:#FFFFFF;
background-color: #000000;
opacity: 0.5; /* 要素全体を半透明にする */
}表示結果
See the Pen
calc_middle by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
top: calc(50% - 60px);親要素の縦方向の中心位置（50%）から要素の高さ（120px）の半分（60px）を引いて、中心に配置する場合の要素の左上の位置をcalcファンクションで求めます。
まとめ
要素を上下で中央に配置するには「top: calc(50% – 要素の高さの半分);」と記述します。
中央に配置したい要素に「position: absolute;」を設定します。
ヒーローヘッダーの高さ調整
ブラウザの表示領域全体の高さ（100vh）からヘッダーの高さを除いた領域の高さをcalcファンクションで取得できます。
ヘッダーやサイドバーなど、固定された領域を除いた残りの領域の大きさを取得するときに便利です。
またcalcファンクションで設定すれば、ブラウザの幅が変更されたらリアルタイムに大きさを調整できます。
ソースコード
ヘッダーの高さ（50px）を除いたブラウザの表示領域の高さを取得し、id属性がheroの要素に設定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ヒーローヘッダーのフォント -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700&display=swap" rel="stylesheet">
<title>ヒーローヘッダーの高さ調整</title>
</head>
<body>
<header>
<p>ヘッダー（50px）</p>
</header>
<div id="hero">
<div id="heroinner">hero</div>
</div>
<div>
<p>ヘッダーの高さ（50px）を引いて、id「hero」（背景:水色）の高さを画面いっぱいにしています。</p>
</div>
</body>
</html>body { margin: 0 }
header {
height: 50px;
width: 100%;
background-color: #99ccff;
}
header p {
display: inline-block;
height: 24px;
vertical-align: middle;
}
#hero {
position: relative;
height: calc(100vh - 50px);
width: 100%;
background-color: #d1edfb;
}
#heroinner {
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 150px);
width: 300px;
height: 120px;
/* ヒーローヘッダー用のフォント設定 */
text-align: center;
font-family: 'Passion One', cursive;
font-weight: 400;
font-style: normal;
font-size: 120px;
color:#ffffff;
background-color: #000000;
opacity: 0.5; /* 要素全体を半透明にする */
}表示結果
See the Pen
calc_heroheader by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
position: relative;id属性が「hero」の要素（id属性「heroinner」の親要素）に「position: relative;」が設定されているのは、子要素で「position: absolute;」にしたときに、親要素の位置を基準にするためです。
前の見出し「上下の中央配置」のコードで「position: relative;」がなかったのは、標準で子要素がページ全体の左上を基準にしていたため、「position: relative;」を設定する必要がなかったからです。
今回はヘッダーの下の領域で中央にするときに、親要素を位置を決める基準にするため「position: relative;」を設定しています。
height: calc(100vh - 50px);ブラウザの表示領域の高さ（100vh）からヘッダーの高さ（50px）を引くと、ヘッダー部分を除いたブラウザの表示領域の高さを求められます。
まとめ
ヒーローヘッダーをヘッダーの領域を除いた高さにするには、「height: calc(100vh – ヘッダーの高さ);」で設定できます。
【参考】CSSで変数を使う
calcファンクションで計算させるときに、ヘッダーの高さなどを何か所にもわけて同じ値を記述する必要があると、高さを変更する場合に修正漏れや間違いが発生する原因になります。
同じ値を参照したいときに、CSSでプログラミング言語の変数のように使えるカスタムプロパティがあります。
定義した値を呼び出すにはvar関数を使います。
calcファンクションやプロパティの設定に使用できます。
構文
/* カスタムプロパティの定義 */
:root{
--変数名: 値;
}
/* カスタムプロパティの値の参照 */
要素セレクタ {
プロパティ: var(--変数名 [, 規定の値]);
}
カスタムプロパティの宣言
CSSファイルにハイフン2つ（–）で始まる「–変数名」の形でカスタムプロパティ名（変数）に値を設定します。
カスタムプロパティ名が重複しないのなら、:root疑似クラスで定義するとHTML文書全体で使用できます。
カスタムプロパティはどこかの要素セレクタ内ならどこでも宣言できますが、カスタムプロパティを呼び出すには先祖要素（親や親の親などの要素）で宣言する必要があります。
カスタムプロパティの値の参照方法
カスタムプロパティを使いたい場所で「var(–変数名)」として値を呼び出します。
calcファンクション内でもカスタムプロパティの変数が使用でき、calcの結果を別の変数の値にできます。
var関数の2つ目以降の引数は省略できますが、変数名が定義されていない場合のデフォルト値です。
たとえば「var(–test, blue)」と記述し、カスタムプロパティ「–test」が定義されていない場合は「blue」の値になります。
※カスタムプロパティ名は大文字小文字を区別します。
※カスタムプロパティで無効な値が設定されたときは、システムの既定の値が使われます。詳しくは公式ドキュメント「無効な変数では何が起こるか」をご覧ください。
※カスタムプロパティについて詳しくは公式ドキュメント「CSS カスタムプロパティ (変数) の使用 – CSS: カスケーディングスタイルシート | MDN」をご覧ください。
ソースコード
ヘッダーの高さなどをカスタムプロパティで設定し、他の場所で参照できるようにします。
HTMLコードと表示結果は前の見出しの「ヒーローヘッダーの高さ調整」と同じです。
:root {
--header-height: 50px; /* ヘッダーの高さ */
--heroinner-width: 300px; /* ヒーローの内側要素の幅 */
--heroinner-height: 120px; /* ヒーローの内側要素の高さ */
--header-bg-color: #99ccff; /* ヘッダーの背景色 */
--hero-bg-color: #d1edfb; /* ヒーロー領域の背景色 */
}
body { margin: 0 }
header {
height: var(--header-height);
width: 100%;
background-color: var(--header-bg-color);
}
header p {
display: inline-block;
height: 24px;
vertical-align: middle;
}
#hero {
position: relative;
/* ヒーロー領域をヘッダーを除いた表示領域にする */
height: calc(100vh - var(--header-height));
width: 100%;
background-color: var(--hero-bg-color);
}
#heroinner {
position: absolute;
/* 要素の中央位置（垂直方向）の配置。中央位置（50%）から要素の半分の高さを引く（位置の基準が左上のため） */
top: calc(50% - var(--heroinner-height) / 2);
/* 要素の中央位置（水平方向）の配置。中央位置（50%）から要素の半分の幅を引く（位置の基準が左上のため） */
left: calc(50% - var(--heroinner-width) / 2);
width: var(--heroinner-width);
height: var(--heroinner-height);
/* ヒーローヘッダー用のフォント設定 */
text-align: center;
font-family: 'Passion One', cursive;
font-weight: 400;
font-style: normal;
font-size: var(--heroinner-height);
color:#ffffff;
background-color: #000000;
opacity: 0.5; /* 要素全体を半透明にする */
}表示結果
See the Pen
calc_var by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
:root {
--header-height: 50px; /* ヘッダーの高さ */
--heroinner-width: 300px; /* ヒーローの内側要素の幅 */
--heroinner-height: 120px; /* ヒーローの内側要素の高さ */
--header-bg-color: #99ccff; /* ヘッダーの背景色 */
--hero-bg-color: #d1edfb; /* ヒーロー領域の背景色 */
}カスタムプロパティを:root疑似クラスで定義して、HTML文書全体で使用できるようにします。
特定の要素内でしか使わないのであれば、:rootではなく他の要素で定義しても構いません。
height: var(--header-height);header要素のheightプロパティにカスタムプロパティ「–header-height」の値「50px」をvar関数で取得し、設定しています。
/* ヒーロー領域をヘッダーを除いた表示領域にする */
height: calc(100vh - var(--header-height));id属性が「hero」の要素のheightプロパティをcalcファンクションで計算して設定しています。
ブラウザの表示領域の高さ（100vh）からヘッダーの高さをカスタムプロパティ「–header-height」をvar関数で取得して計算しています。
var関数をcalcファンクションで使用する場合も+-の演算子の前後に半角スペースを空けます。
background-color: var(--hero-bg-color);カスタムプロパティで背景色を設定しています。
このようにカスタムプロパティでは数値だけでなく、色などのプロパティに設定する値として使えます。
また、それぞれの要素の背景色は1度しか使われていませんが、CSSの:rootにまとめて設定することにより、後から修正箇所が見つけやすく設定しやすいという利点があります。
まとめ
何度も使用する値などをカスタムプロパティで定義できます。
:root疑似クラスで定義すればHTML文書全体でカスタムプロパティが使えます。
カスタムプロパティを使用するには、var関数を使います。
カスタムプロパティはcalcファンクションでも使えます。
calcファンクションの使用上の注意点
- 対応ブラウザの確認
- 構文ミスの確認
対応ブラウザの確認
CSSのcalcファンクションはCSS3で追加された機能です。
CSS3自体は2011年から策定が進んでいますが、まだ対応していない古いブラウザも存在するため注意が必要です。
※各ブラウザの対応状況について詳しくは公式ドキュメント「ブラウザーの互換性」をご覧ください。
古いブラウザでcalcファンクションを使いたいときは？
ベンダープレフィックスを使って各ブラウザの独自のプロパティを使って古いブラウザでもcalcファンクションを使える場合があります。
どうしてもcalcファンクションに対応していないブラウザのために、直に値を設定したスタイルも書いておきます。
たとえば横幅30pxの残りの幅を計算したい場合、下記のように記述します。
width: 95%;
width : -webkit-calc(100% - 30px);
width: calc(100% - 30px);CSSのスタイルは下に書いたものが優先されるため、calcファンクションに未対応の場合はベンダープレフィックスの「-webkit-calc(100% – 30px);」か、直に書いた「width: 95%;」が適用されます。
※ベンダープレフィックスについて詳しくは公式ドキュメント「Vendor Prefix (ベンダー接頭辞) – MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN」をご覧ください。
構文ミスの確認
ブラウザがcalcファンクションに対応していても、CSSでの書き方が間違えていれば正しく計算できません。
演算子の前後に半角スペース
よくある構文ミスが「calc(100%-20px)」のように、加算や減算の演算子の前後に半角スペースを入れていない書き方です。
正しくは「calc(100% – 20px)」のように半角スペースを演算子の前後に入れます。
除算（/）や乗算（*）では演算子の前後に半角スペースは不要ですが、間違いを防ぐためにも半角スペースを入れておいたほうが望ましいでしょう。
ゼロの割り算はできない
他のプログラミング言語でも同じですが、ゼロによる除算はできません。
まとめ
CSSのcalcファンクションで、レイアウトやサイズ指定に計算式を使えるようになります。
calcファンクションを使えば異なる単位で計算でき、ブラウザの大きさの変動などに合わせてリアルタイムに値が計算されます。
計算式で+と–を使うときには、演算子の前後に半角スペースを入れます。
CSSでこんなに便利な計算ができるcalcファンクションがあるって知りませんでした。
CSSには変わらない値しか書けないと思っていました。
たしかにcalcファンクションを使えば％と他の単位を同時に使いたいときや、数値で割り切れない部分の要素があるときに便利だね。
足し算や引き算をするときは、演算子の前後に半角スペースを入れるのを忘れないでね。
分かりました。ありがとうございます！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
