pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる﹁calc()﹂がどのように機能し、どのように使うのか、﹁calc()﹂を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに﹁calc()﹂はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ﹁calc()﹂とは値を計算式で指定できる ﹁calc()﹂を使う理由 ﹁calc()﹂の使い方 ﹁calc()﹂を使うと便利になる実装テクニック ﹁calc()﹂とは値を計算式で指定できる CSS3の﹁calc()﹂は、プロパティの値を計算式で
![CSSのcalc()関数を使うとスゴイ便利!ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d3a2857599a07355d7cf5a42b28a51e084109a0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017020410.png)