以前に紹介した、CSSで計算式を使うための関数「calc」について、指定したはずなのに何故かブラウザに反映されない！という現象に遭遇したので、それの回避方法についてです。
なお、前回のcalc()についてまとめた記事はこちらから。
【CSS】スタイルシート内で計算式が使えるcalc()が便利
https://cpoint-lab.co.jp/article/201801/【css】スタイルシート内で計算式が使えるcalcが便利
で、本題ですが、その時指定したCSSがこちら。
div {
width: calc(50vw-20px);
}
ちなみに、値には特に意味はありません。
一見、何の問題もないように思えますが、このCSSを指定しても横幅は変化しませんでした。
問題は、なんと半角スペース。
なんでも、計算式で使われている + や – などの符号の前後に、半角でスペースを空けないと構文エラーになるとのことでした。
なお、今回参考にしたサイトはこちら。
css3-CSS calc() not working-Stack Overflow
https://stackoverflow.com/questions/14967421/css-calc-not-working
同じように、calc()が動かない、という質問に対しての解決策がまとめられています。
やはり、同じように間違ってしまう人がいるようですね。
と、いうことで、先程のCSSを下記のように修正すれば、万事解決です。
div {
width: calc(50vw - 20px);
}
以上、calc()が使えない時の対処法でした。
まさかスペースが関係しているとは思わず…少し悩んでしまいました。
皆様も、CSS で calc() を使うときはお気を付けください。
