もうwidthに悩まされない スタイルシートで計算式を使って楽しよう
CSSをいじってレイアウトを調整していると悩みがちなwidthの扱い。あっち（PC表示）を立てればこっち（スマホ表示）が立たずで、試行錯誤で調整することもままあります。
しかしCSSで計算式を使えばwidthに悩まされることは激減するはず。
CSSの変数とは違ってIE11もサポートしているため、普通に使えます。
calc() as CSS unit value | Can I use…
CSSの計算式の使い方
使い方は簡単。
witdh: calc(98%/2);
witdh: calc(100% – 150px);
のように、calc()の（）内で計算式を書くだけで加減乗除 “+-*/" ができます。
ただ、+-は注意が必要で、width(100% – 10%)ならいいけど width(100%-10%)だと動かないということがあります。スペースが必要みたい。
widthばかりでなく、margin、padding、font-size、border、box-shadowなど、日ごろ使うもの一通りに使えます。
calcの特徴は別の単位を使っても計算してくれるということ。%、px、em、rem、vw、vhなど、
100%から150px引いたり、50%にマージンとボーダーの21px分足す、といったことができます。
横並びに配置したい時はもとより、vwを使ってのbox-shadowの陰の大きさまで調整することができます。便利すぎです。