More than 5 years have passed since last update.

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

Last updated at 2016-10-28Posted at 2016-10-28

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

.css

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

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

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