【css】レスポンシブ対応に便利な「calc()」

「calc()」はおそらく紹介する中では最もよく使われていますが、ここで取り上げる価値があります。もしあなたが一度も「calc()」を使ったことがないなら、例えばある要素の幅を指定したピクセル分だけ減らすことが簡単にできます。

.css

.box {
  width: calc( 100% - 20px );
}

一見、Sassのプリプロセッサのように見えるかもしれませんが、これはネイティブなCSSで、ブラウザはこの計算を行って要素のサイズをレンダリングします。

.boxの要素のサイズは、100%から20pxをマイナスされた幅で表示されます。このスタイルシートは、可変幅の要素と一緒に固定幅の要素を置くなど、多目的に使用することができます。

【備考】
・W3C -calc()
・calc() のサポートブラウザ