CSSでのcalcが効かない7つの原因と修正方法
違う単位同士を計算して出力できるcalcという非常に便利なものがあります。
しかし、場合によってこのcalcが効かないことがあります。
CSSでのcalcが効かない7つの原因と修正方法をお伝えします。
先に言うとcalcは半角スペースのありなしがシビアです。
↓「そもそもcalcって何？」という方はこちらの記事でご確認ください。
目次
calcが効かない原因1.式と数値の間にスペースがない
+（たし算）と-（ひき算）を使うときは式と数値の間にスペースが必要です。
失敗例（スペースなし）
width:calc(100%-200px)
横幅いっぱいになっているのはwidthが効いていなく初期値になっているためです。
成功例（スペースあり）
width:calc(100% - 200px)
ちなみに*（かけ算）と/（わり算）のときはスペースなしでもOKです。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
calcが効かない原因2. calcと()の間にスペースがある
以下のようにcalcと()の間にスペースがあると効きません。
失敗例
width: calc (100% - 200px)
成功例
width:calc(100% - 200px)
calcが効かない原因3. *（かけ算）と/（わり算）のときに単位をつけている
*（かけ算）と/（わり算）のときに単位をつけてはいけません
失敗例（単位あり）
width:calc(100% / 2%)
100%を2で割るなら単位はいりません。
成功例（単位なし）
width:calc(100% / 2)
calcが効かない原因4. +（たし算）と-（ひき算）のときに単位がない
かけ算・わり算とは逆に+（たし算）と-（ひき算）のときは単位が必要です。
失敗例（単位なし）
width:calc(100% - 200)
成功例（単位あり）
width:calc(100% - 200px)
calcが効かない原因5.計算式内に「;（セミコロン）」が入っている
失敗例
width:calc(100% - 200px;)
成功例
width:calc(100% - 200px);
CSSの最後には「;」をつけますが、うっかり計算式のカッコ内に「;」をつけてしまうとNGです。
そのほか、カッコの付け忘れにも注意しましょう。
calcが効かない原因6.スペルミス
失敗例
width:cacl(100% - 200px)
成功例
width:calc(100% - 200px)
calcやpxなどのスペルミスです。
冗談かと思うかもしれませんが、ほんとにあります。
calcが効かない原因7.IEではcalcの入れ子が効かない
くわしくはこちらの記事に記載していますが、IEではcalcの入れ子が効きません。
その他の原因.CSSの書き方を間違えている？
上記にも当てはまらない場合、他が原因かもしれません。
↓こちらの記事を参考にしてみてください。
まとめ
calcが効かない原因1. 式と数値の間にスペースがない
スペースをいれましょう。
calcが効かない原因2. calcと()の間にスペースがある
スペースを削除しましょう。
calcが効かない原因3. *（かけ算）と/（わり算）のときに単位をつけている
掛ける・割る数値には単位をつけません。
calcが効かない原因4. +（たし算）と-（ひき算）のときに単位がない
足す・引く数値には単位が必要です。
calcが効かない原因5.計算式内に「;（セミコロン）」が入っている
「;」は計算式カッコの外に記述しましょう。
calcが効かない原因6.スペルミス
スペルミスをしていないか確認しましょう。
calcが効かない原因7.IEではcalcの入れ子が効かない
残念ながら現時点でIEが対応していません。
対応としては入れ子を使わず初めから計算する、スマホ版でだけ入れ子を使う、です。
以上、calcが効かない原因と修正方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
