CSS

Calcで単位が違う計算をしてみよう

異なる単位でも計算することができるcalcの使い方について見ていきます。

  • calc

calc

web制作をしていると単位が違う計算をしたいことが多々あります。例えば要素の大きさは変わってもいいのでブラウザの横幅いっぱい100%のうち100pxの間隔を開けて要素を配置したい場合などです。

・これは計算をすることで実現することができそうです。計算方法は要素と余白をあわせて100%になるので要素が3つあった場合、100 = 3x + 100px * 2です。あとはxについて求めるのでx = (100% - 200px) / 3で要素の幅を指定することができます。

・この時四則演算を使っていきますが記号が特殊で+, -, はそのまま使えばいいのですが×は「*」を÷は「/」を使ってあげます。

・また四則演算を使う場合は間に半角空白を入れてあげるようにしましょう。

・今回の場合はboxの幅を空白を差し引いた3つの要素で分けるのでwidth: calc((100% - 200px) /3);としてあげればいいでしょう。

・あとはそれぞれの要素を所定の位置に配置するためにmarginで調整してあげます。

-広告-

 

 






-CSS