レイアウトを組む時、特に横幅可変やレスポンシブ対応の際に横幅や余白の計算は不可欠ですね。例えば横幅いっぱいに伸ばしたいけど50pxだけ余白を残したい時。「親のdivにpadding指定して、子の要素はwidthを100％で」という具合で大抵問題ないですが、もっとシンプルに指定できないものか、という時にとても役立つのが「calc()」関数です。
calc()関数とは
calcとはcalculationの略で、計算という意味を持ちます。その名の通り、CSS内で計算できるわけですね。calc()関数は数値で指定するプロパティに使用できるので、width、font-size、margin、background-potisionなど、多くの場面で活用できます。
calc()関数の具体例
使える計算式は基本的な「＋、－、×、÷」の4種類。書き方はこんな感じです。
width: calc(100px + 10px);
この場合、横幅は110pxになります。これならcalc()を使わずとも110pxで良いんじゃない？と思いますが、次の例ではどうでしょう。
width: calc(100% - 50px);
この場合、横幅は100％から50px引いた数値になります。横幅可変レイアウトの時に重宝しますね。他のプロパティに対しては以下のような使い方も出来ます。
padding: calc(1vw + 1em); top: calc(50% - 100px); font-size: calc(100vw / 30);
対応ブラウザ
2018年現在、PCとSPいずれも主要ブラウザは対応しています。より安全に使用するには以下のようにベンダープレフィックスを付けた指定と、非対応ブラウザのためのフォールバックを書いておくと良いかと思います。
width: 90%; /* フォールバック */ width: -webkit-calc(100% - 50px); /* ベンダープレフィックス付き */ width: calc(100% - 50px);
以上、横幅可変やレスポンシブ対応の際に特に便利なcalc()関数でした。
