CSScalc（）関数

Calc（）は、CSSで値を直接計算できるCSS関数です。 例えば：

.pirate {
  position: absolute;
  /* lets have the pirate 20px from the left */
  left: calc(50px - 30px);
}

一見するとあなたは思うかもしれませんなぜ私は気にするのですか？ 20pxに設定できます 。 ユニットを組み合わせて組み合わせることができることに気付くと、物事は面白くなります。

left: calc(1.5em - 8px);

そして、パーセンテージ値を混ぜると、物事はさらに面白くなります。 以下は、選択した要素の幅を100％未満の80pxに設定します。

width: calc(100% - 80px);

オペランドの前後には必ずスペースを使用してください。 例：v1+v2またはv1+v2ではなく、v1+v2。

calc（）は、数値を使用する場所であればどこでも使用できます（例：width、max-height、margin-left、…）

Calc（）は、中央に配置する要素の高さがわかっている場合、垂直方向の中央揃えなどに非常に役立ちます。 ビューポートの高さから要素の高さの半分を引いた50% ofの要素にマージントップを追加するだけです。 要素の高さが100ピクセルだとします。

.my-element {
  display:block;
  margin-left:auto;
  margin-right:auto;
  /* 50vh = 50% viewport height */
  margin-top: calc( 50vh - 50px );
  width: 200px;
  height: 50px;
}

ブラウザのサポート

calcを使用できますか？ caniuse.comの主要なブラウザーでのcalc機能のサポートに関するデータ。