calc()を使って値を計算しよう

今回は、Webサイト制作でCSSを記述する際に使用する「calc関数」について学んでいきます。

この記事を読めば、CSSの値の指定をワンランク上の方法でできるようになります。

コードの記述量が減ったり、綺麗でわかりやすく指定することができるようになるので、この機会にマスターしましょう。

calc()とは

calc()とは、CSSを記述する際に「計算式」を使うことができる関数です。

「計算」の意味を持つ「calculation」の頭の部分がcalc()の由来になっています。

使用するメリット

calc()が使えるようになると、細かい計算が瞬時に行えるようになります。

例えば、横幅が100%の要素を３等分するようにスタイルを記述するとします。
100は3で割り切ることができないので、普通に記述しようとすると以下のように小数点が続いてしまいます。

.sample {
  width: 33.33333%;
}

.sample {
  width: calc(100% / 3);
}

.sample {
  width: calc(100% - 8px);
}

.sample {
  width:calc(100% / 2 - 8px);
}

calc()の中で計算される順番は「掛け算」「割り算」が先に計算されます。

こちらの例では「100% / 2」の箇所から先に計算されます。
（100%の横幅が800pxの場合、400pxから8px引かれるので計算結果は「392px」）

また、割り算を行う場合「0」で割ることはできないので、注意しましょう。

計算の優先順位を設定することができる

計算する順番を制御するために「括弧（）」を使って、入れ子構造を作ることができます。

.sample {
  width:calc((100% - 8px) - 16px);
}

上記のように記述することで「括弧（）」の中の計算を優先的に行わせることができます。

この例では「括弧（）」の中にある「100% - 8px」が先に計算されます。

演算子の前後には半角スペースが必要

 /*推奨*/
.sample {
  width: calc(100% - 8px);
}

/*非推奨*/
.sample {
  width: calc(100%-8px);
}

calc()で計算を行うための演算子の前後には、Webフォントとは、「半角スペース」が必要です。

この半角スペースの記述を忘れてしまうと、
うまくcalc()が機能しなくなってしまうので注意しましょう。

使えるプロパティは限られる

calc()は全てのプロパティで使用できるわけではありません。

calc()が使えるCSSのプロパティには以下のものがあります。
基本的によく使用するプロパティが多いので、すぐ使いやすいと思います。

• width
• height
• margin
• padding
• border-width
• font-size
• text-shadow
• transform
• animation
• transition

calc()を使ってみよう

ここまでcalc()の基本的な使い方を説明してきました。

• calc関数とは、CSSの値の中で計算をおこなうことができるもの
• 計算のときは四則演算の演算子を使用する

ここを理解できていればばっちりです！

calc()はWebサイト制作の中で、コードを綺麗に記述したりコード量を少なくするために記述されることが多い関数です。

この機会にみなさんもマスターして、実際のコードの中で使ってみましょう。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー