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

2020年02月28日

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

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

calcの基本はこちら↓

カッコと計算式

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

5-2×3

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

5-2×3
＝5-6
＝-1

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

（5-2）×3
＝3×3
＝9

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

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

例

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

テキスト

上記の例を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を入れ子で使う方法と注意点でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。