CSS プロパティに指定する値を計算式で書くことができる仕様、calc() 関数について、具体的なサンプルソースをそえて解説してみたいと思います。 CSS の calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる仕様です。 ちょっと前に Firefox 48 が、この calc() 関数の入れ子表記に対応した件で下記のような記事を書いたのですが、その時参考にリンクを張ろうとした、過去に calc() 関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。 Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に なお、上記記事でも書いたとおり、calc() 関数は現時点で IE (IE11)や Edge を始め
![CSS で計算(四則計算)が行える calc() 関数を使ってみよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/18d8be77b54dce31b783d0db239eea70ebb1c8e4/height=288;version=1;width=512/https%3A%2F%2Fhyper-text.org%2Fimg%2Fasset%2Ffirefox_48_support_nested_calc.png)