CSScalc()関数
Calc()は、CSSで値を直接計算できるCSS関数です。 例えば:
.pirate {
position: absolute;
/* lets have the pirate 20px from the left */
left: calc(50px - 30px);
}
一見するとあなたは思うかもしれません
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機能のサポートに関するデータ。