【CSS】CSSで計算式を扱うためのcalc()関数が使えない時の対処法

村上 著者:村上

【CSS】CSSで計算式を扱うためのcalc()関数が使えない時の対処法

以前に紹介した、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() を使うときはお気を付けください。

  • この記事いいね! (0)

著者について

村上

村上 administrator