スポンサーリンク

CSS calc()が動かない

CSS

HTML+CSSの勉強をしている人から『width: calc(50%-5px)』が動かないという質問を頂いた。
書き方が間違っているから動かないのは当然だけど、確かにわかりにくいのでレクチャーをしたら納得してもらえたので記録。

width: calc(50%-5px);

だと動かないけど

width: calc(50% - 5px);

と記述すれば動く。スペースを挿入する必要がある。
理由としては、

スタイルシートには『mergin: -5px;』の様にマイナスの値を指定した記述方法もあるから、スペースで区切ってもらわないと-5pxを指定したいのか、5pxをマイナスして欲しいのかブラウザが判断つかないから(かな)

我ながらわかりやすい説明ができたかなとは思っているけど、それが本当の理由なのかは定かではない。
ウェブ業界で10年以上仕事をしてきた身としてはそのぐらいの理解で十分かなと思ってる。

widthだけじゃなく、paddingやfont-sizeなんかにも使える便利なcalc
「カルク」とか呼んで使ってたけど、調べてみたら計算の意味のcalculationの頭4文字を取ってたんですね。「キャルク」とでも呼ぶべきなのかな。

コメント

スポンサーリンク
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました