ホーム(記事一覧)へ

CSSでのcalcが効かない7つの原因と修正方法

違う単位同士を計算して出力できるcalcという非常に便利なものがあります。

しかし、場合によってこのcalcが効かないことがあります。
CSSでのcalcが効かない7つの原因と修正方法をお伝えします。

 

先に言うとcalcは半角スペースのありなしがシビアです。

 

↓「そもそもcalcって何?」という方はこちらの記事でご確認ください。

calcが効かない原因1.式と数値の間にスペースがない

+(たし算)と-(ひき算)を使うときは式と数値の間にスペースが必要です。

失敗例(スペースなし)

width:calc(100%-200px)

テキスト

横幅いっぱいになっているのはwidthが効いていなく初期値になっているためです。

成功例(スペースあり)

width:calc(100% - 200px)

テキスト

ちなみに*(かけ算)と/(わり算)のときはスペースなしでもOKです。

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)

テキスト

100pxを2で割るなら単位はいりません。

成功例(単位あり)

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が効かない原因と修正方法でした。

関連記事