CSS calc() プレイグラウンド

機能

• calc() の式を書くと、その場で検証して計算します
• ⚠️ 「足し算と引き算の空白抜け」を指摘：calc(100%-2rem) は無効なのに普通に見えます
• ⚠️ 単位を確認：足し算は同じ種類どうし、掛け算と割り算は片側が単位のない数値
• 括弧と入れ子の calc() に対応し、対応の取れない括弧も指摘します
• 容器の幅・文字サイズ・間隔をカスタムプロパティとして出力（--cw / --fs / --gap）
• 式の中から var() でこの 3 つの量を参照できます
• 単位を px / rem / vw / % に切り替えて結果の変化を確認できます
• 理解するのは数値・単位・演算子・括弧・var() だけで、コードは実行しません（eval 不使用）
• すべてブラウザー内で完結し、何も送信しません

使い方

1. 容器の幅・文字サイズ・間隔を入力し、単位を選びます
2. 式の欄に calc(...) を書きます（足し算と引き算の両側に空白を）
3. 下の計算の説明とエラー表示を確認します
4. 生成された CSS をコピーします（カスタムプロパティごと）

よくある質問

calc(100%-2rem) が効かないのに、見た目は問題ないのはなぜですか？

足し算と引き算の記号の両側に空白が必要だからです。CSS の仕様では `+` と `-` を演算子として使うとき前後に空白が必要で、`calc(100%-2rem)` は不正な値になります —— ブラウザーは宣言ごと破棄し、プロパティは初期値か auto に戻ります。エラーも警告も出ないので、最も見つけにくいのです。`calc(100% - 2rem)` と書けば直ります（掛け算と割り算は空白不要）。

1px * 1px が許されないのはなぜですか？

CSS の掛け算は単位も掛け合わせるからです：`1px * 1px` は「平方ピクセル」になり、CSS にそんな単位はありません。掛け算と割り算は片側が単位のない数値である必要があり、`1px * 2` や `6px / 2` なら成り立ちます。普通の四則演算と最も混同しやすいところです。

式がコードとして実行されることはありませんか？

ありません。ここでは `eval` を使っていません —— 使うと入力がコードとして実行されます。検証は数値・単位・四則演算子・括弧・`var()` だけを理解する小さな解析器で行い、それ以外はエラーにします。ちなみに `eval` では上の空白の誤りも見つけられません：`100%-2rem` を 98 と喜んで計算してしまいます。

パーセントは何に対する割合ですか？

その値を使うプロパティが基準にしているものに対する割合です。`width` なら包含ブロックの幅、`font-size` なら親要素の文字サイズ —— つまり `100%` がいくつになるかは、どのプロパティに書くかで決まります。相対単位を含むときにここでピクセル数を無理に出すのではなく、単位の種類と参考値を示すのはそのためです。