CSS基礎 練習問題 53：値の四則演算
要素の横幅を、親要素の幅（100%）から両端の余白分（合計40px）を引いたサイズに動的に設定したい場合、正しいCSSの書き方はどれか。
- width: 100% - 40px;
- width: calc(100% - 40px);
- width: math(100% - 40px);
- width: 100% minus 40px;
- width: eval(100% - 40px);
正解と解説を見る
正解：width: calc(100% - 40px);
パーセンテージ（%）とピクセル（px）など、異なる単位を混ぜて引き算などの計算を行いたい場合は `calc()` 関数を使うのが正解です。
【正解の理由】
`calc()` 関数を使用すると、CSS内で動的に四則演算を行うことができます。演算子の前後には必ず半角スペースを空ける必要があります。
【不正解の理由】
• `width: 100% - 40px;` は、計算関数を使用せずに式を直接書いているため、CSSとして構文エラーになる
• `width: math(100% - 40px);` は、CSSに `math()` という関数は存在しないため無効である
• `width: 100% minus 40px;` は、`minus` というテキストでの引き算の記述方法はCSSに存在しない
• `width: eval(100% - 40px);` は、JavaScriptの関数のような書き方であり、CSSのプロパティとしては使えない