← エラー辞典に戻る

CSS

Invalid property value（CSSの値が無効）

プロパティが受け付けない値を書いている

こんな症状

DevToolsのStylesでスタイルに取り消し線と⚠アイコンが付き、「Invalid property value」と表示される。プロパティに使えない値を書いているのが原因で、その行はまるごと無視されているよ。

まず試す

DevToolsのStylesで取り消し線＋⚠が付いた行を探す。数値に単位を付け、存在する値に直す。

css
/* ✅ 正しい書き方 */
.box {
  width: 100px;
  display: flex;
  height: calc(100% - 20px);
}

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓width: 100 のように単位がない
    → px・%・rem などの単位を付ける（0以外は必須）。
  • ✓display: flexbox のように存在しない値
    → 正しい値にする（flex など）。MDNや補完候補で確認する。
  • ✓calc(100%-20px) のようにスペース忘れ
    → 演算子の前後にスペースを入れる：calc(100% - 20px)。

なぜ起きる？

プロパティに対して無効な値を指定しているよ。よくあるのは、(1) width: 100 のように数値に単位を付け忘れた（0以外は単位必須）、(2) display: flexbox のように存在しない値を書いた（正しくは flex）、(3) calc(100%-20px) のように calc() の演算子の前後にスペースを入れ忘れた（calc(100% - 20px) が正しい）、(4) 色名やプロパティ値のタイポ。無効な値の行はブラウザに無視されるだけでエラーは出ないので、「書いたのに効かない」という形で気づくことが多いよ。

✕ エラーが起きるコード
/* ❌ どれもInvalid property valueで無視される */
.box {
  width: 100;              /* 単位がない */
  display: flexbox;        /* 存在しない値 */
  height: calc(100%-20px); /* calcのスペース忘れ */
}
✓ 直したコード
/* ✅ 正しい書き方 */
.box {
  width: 100px;
  display: flex;
  height: calc(100% - 20px);
}

✅ 直ったか確認

DevToolsのStylesでその行の取り消し線が消え、見た目に反映されればOK。

🆘 まだ直らないときは

色名やプロパティ値のタイポも疑う。VS Codeの補完から選ぶとタイポを防げる。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

📖 この問題を学べるレッスン

CSSコース（基礎から）で根本から理解する →

✏️ 手を動かして練習

練習ドリル一覧で実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 CSSコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

CSSコースを始める →

❓ 関連するQ&A