CSS widthをcalcを使って指定する方法 width: calc(100% / 3) etc.

CSS widthをcalcを使って指定する方法 width: calc(100% / 3) etc.

CSSでwidthを指定するとき、calcを使って計算された値にすることができます。

たとえば、

width: calc(100% /2 )

と指定すると、ブラウザの横幅の半分にすることができます。

ブラウザの表示↓

 

width: calc(100% / 3)

と指定すると、ブラウザの横幅の1/3の幅にすることができます。

ブラウザの表示↓

 

ちなみに、MDNリファレンスに挙がっている例の

width: calc(100% - 80px)

は、ブラウザの横幅から 80 px を引いた幅という意味です。

 

MDNリファレンスによると、

CSSのcalc()関数は、CSSのプロパティ値を指定する際に計算を行うことができるものです。

https://developer.mozilla.org/ja/docs/Web/CSS/calc

 

参考にしたYouTube

CSSカテゴリの最新記事