More than 1 year has passed since last update.

calc cssについて

Last updated at 2022-06-17Posted at 2022-06-14

概要

実務でフロント側を書いていたらなんだこれってものがあったのでメモをしておく

cssの関数です。
とは言っても、これだけじゃわからないですよね。
calcを使うことでpxとemとremなどの相対単位を計算できてしまうんです。

例１

.sample {
    width: calc(100px + 50px);
}

これの場合は勿論sampleクラスのwidthは150pxになります。
例２

width: calc(100% - 80px);

こちらは横画面いっぱいから80px引いた値になります。

例３

width: calc(100% - 1em);

こちらは横画面いっぱいから1em引いた値になります。

例４

.modal {
  z-index: calc(3 / 2);
}

calcは整数のみを扱うためこの様に割り切れない場合は、近似値の2となります
また、Chromでは割り算の場合は計算結果が整数になっても使用できません。

例５

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

こちらの値はwidth:25pxになります。
余談ですが、CSSでは先頭に--をつけることで変数として扱うことができます。
各セレクタに定義してもいいのですが下記の様に:rootとすることでグローバル変数の様に扱うこともできる。

:root {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

親コンテナの幅を1/6にしたい場合

.foo {
    width: 16.666666667%;
}

こちらの方が何をしたいか分かり易い

.foo {
    width: calc(100% / 6);
}

また、scssで書いた場合、ブラウザでコンパイルされると計算結果だけが反映される

// SCSSで指定された値
.foo {
    width: 100px + 50px;
}
 
// ブラウザでCSSと計算値をコンパイル
.foo {
    width: 150px;
}

しかし、calcを使うとブラウザに計算式ごと渡される
これはブラウザにおける値がより動的になり、ビューポートの変更に合わせて適応できる


// CSSで指定された値
.foo {
    width: calc(100% - 50px);
}
 
// ブラウザの計算値
.foo {
    width: calc(100% - 50px);
}

今回のことを知ってCSSは改めて奥が深いと感じた