マンガでわかるホームページ作成

IEでは効かない!CSSでcalcを入れ子で使う方法と注意点

CSSではcalcという要素を使うことで違う単位のものを計算して出力できる非常に便利なものがあります。

calcは入れ子で使うことができますが注意点もあります。
以下で詳しく説明します。

calcの基本はこちら↓

カッコと計算式

本題に入る前に、数学では計算の優先度があります。
以下の式の解を求めてください。

5-2×3

かけ算・わり算が優先され、たし算・ひき算はそのあとです。

5-2×3
=5-6
=-1

しかし場合によっては先にたし算・ひき算をしたいこともあるでしょう。その場合はカッコ()を使います。

(5-2)×3
=3×3
=9

calcで入れ子・カッコを使う

calc()もカッコがありますね。上記のように計算の優先度を変更するために入れ子として使うことができます。

width:calc( calc(100% - 200px) / 2)

テキスト

IEではcalcを入れ子で使えない!

上記の例をIEで見てみてください。効いておらず幅が横いっぱいになっていますよね。
IEではcalcの入れ子が通用しません。
ブラウザが対応していないので、修正方法としては「入れ子で使わない」となります。

width:calc( calc(100% - 200px) / 2)
=width:calc(calc(100% / 2) - calc(200px / 2))
=width:calc(50% - 100px)

calc入れ子の活用方法としてはスマホ版でだけ使うことです。
幸いIEのスマホ版はありません。PC版ではcalcの入れ子を使わず、スマホ版でcalcの入れ子を使ってみてください。

まとめ

calcを入れ子で使うことは可能。ただしIE以外。

以上、CSSでcalcを入れ子で使う方法と注意点でした。

関連記事