CSS calcでのwidth指定エラー

Question

横幅の指定されたエリアの中に画像を配置している際に、
その画像の表示サイズ指定をする場合、下記のように記載してエラーになる理由って、なんでしょうか？

img{width:calc((100%-15px)/4)px;}
もしくは
img{width:calc((100%-15px)/4);}

当該ケースで「invalid property value」エラーが起きてしまい、理由がわからず困っています…。

Comments

[think49]

「何のツールで検証したらエラーになるのか」を明らかにされるとより具体的な回答が貰えると思います。

[yamatonchu]

Chromeのデベロッパーコンソールで確認するとエラー警告が表示されます

[think49]

当該エラーはコンソールでは確認できませんでしたが、[Styles] タブで確認できました。詳しくは回答に追記しました。

Answer 1

1. 正と負、加算と減算が区別できるように**+, -演算子の前後にはスペースが必要**です。
2. calc関数で算出された値に単位を付与する必要はありません。

img {
    width: calc((100% - 15px) / 4);
}

Answer 2

calc() の仕様

さらに、空白文字は+と-演算子の両側に要求される。（*および/演算子は周りの空白なしで使用することができる。）

• 8.1.1. 構文 - CSS Values and Units Module Level 3 日本語訳

仕様では上記のようにあるので - の両端に空白文字がなければ文法エラーとなるのが正しいようです(/ の両端に空白は不要です)。

W3C CSS 検証サービス

ただし、先述の文法規則を守ったとしても「W3C CSS 検証サービス」では文法解析エラーが発生します。

• [CSS] calc() 式の検証 - JSFiddle
• W3C CSS 検証サービス

span {
  width: calc(25% - 6px);
}

仕様にあるCSSをコピー&ペーストして [検証する] をクリックしても同様のエラーが発生するので「W3C CSS 検証サービス」が calc() に対応してない可能性が高いと考えます。

• 8.1. Mathematical Expressions: calc() - CSS Values and Units Module Level 3

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

Chrome Developer Tools

質問の追記より引用。

Chromeのデベロッパーコンソールで確認するとエラー警告が表示されます

設定の問題かもしれませんが、私の環境では Google Chrome v56.0.2924.87 においてコンソールに警告が表示されませんでした。
ただし、[Elements] -> [Styles] タブにおいては下記エラーを確認できました。

img{width:calc((100%-15px)/4)px;} /* invalid property value */
img{width:calc((100%-15px)/4);} /* エラーは発生せず */

もし、コンソールに上記エラーを出力できるのだとすれば、同様の結果になると思われます。

(注意)
Google Chrome のコンソールは[更新] ボタンを押してページを更新しても更新前のコンソールログがそのまま残る仕様です。
エラーが出力された状態でCSSを修正し、ページを更新した場合、修正前のエラーログが変わらずに表示され、修正後のエラーが解消された状態になります。
つまり、修正前のエラーが一つだけ表示されるはずです。
この仕様は混乱を招くのでコンソールを一度クリアしてからページを更新すると良いと思います。

Re: yamatonchu さん

Answer 3

/* img{width:calc((100%-15px)/4);}
                        ↓      ↓ 空白が無いからでは？ */
   img{width:calc((100% - 15px) / 4);}