calc()関数について

こんにちは、ウェブラボ技術メモです。
今回はcalc()関数についてご紹介します。

■calc()関数とは？
簡単に言うとプロパティの値を計算式で導出できる関数のことです。
対応ブラウザなど詳しくはこちらをご覧ください。

■使い方
calc()関数は様々な活用シーンがあります。
例えば、
横幅100%を三等分したい時には、以下のように記述し並列に均等配置することができます。つまり割り切れない数字の値に使うことができるそうです。

他にも要素のセンタリングや文字サイズを可変に設定することができます。

最近、私が便利だと思ったのは
親要素の横幅を超えてある子要素だけを横幅100%に配置する使い方です。
以下のような記述をします。

ネガティブマージンをcalc関数を使って算出しています。
ウィンドウ幅の100%(100vh)から親要素の幅(100%)を引いて2で割ります。これで親要素の両脇のマージンの幅がわかります。
最後に、ネガティブマージンなのでマイナスになるように-1をかけます。(上図参照)

とても便利なので是非皆さんも使ってみてくださいね！
以上、技術メモでした。