29
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

calc()が効かない?: 中の演算子の間にはスペースが必要です

Last updated at Posted at 2015-01-08

今日のハマりどころ

div要素を中央寄せしようとしてcalc()を使ってやりました

before.css
.example{
  width:300px;
  height:100px;
  top:100px;
  left:calc(50%-300px/2);
}

と書いたら全く反映されなかった。
Developer Toolで確認したらこのleftがInvalid Valueになってた

解決法

ピンとくるまで時間がかかりました。

after.css
.example{
  width:300px;
  height:100px;
  top:100px;
  left:calc(50% - 300px / 2); /*値と演算子の間にスペースが必要*/
}

はい、演算子との間にはスペースが要るんです。
他ファンクションでどうなるかは不明。

=====
#【追記】2015-04-08
だいぶ前の記事ですが割と見て頂いてびっくりです。
Twitterで言及されていたのですが、
+, -には スペースが必要 で、*,/ には スペースが不要 なのだそうです。
参考:

  1. https://twitter.com/terkel/status/553464271862902785
  2. http://www.w3.org/TR/css3-values/#calc-syntax

Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.

しかしややこしいのでのですべての演算子でスペース入れるようにしてます。

29
28
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?