箱のプログラミング日記。

渋谷の自社開発企業でRails書いてます。

calc()の使い方【CSS】

CSSでレイアウトを指定したい時、

heightやwidthに対して一般的に使うのはpxとかですが、

便利に使えるcalcというものがあります。

 

width: calc(100% - 150px);

 

たとえば親要素に対て二つの子要素があり

その二つが横並びになっていたとします。

 

通常だと、子要素それぞれにwidthを指定したり

%で表現したりしますが、

どちらか一方だけ大きさが決まっていて、もう一方は残りの大きさにしたい

時はcalcを使うのが良いです。