CSS

⚠️ Invalid property value（CSSの値が無効）

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

😰 こんな症状

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

🔍 原因

プロパティに対して無効な値を指定しているよ。よくあるのは、(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のスペース忘れ */
}

✅ 直し方

1. DevToolsのElementsで要素を選び、Stylesパネルで取り消し線＋⚠が付いている行を探す（そこが無効な行）。 2. 数値に単位（px・%・remなど）を付ける。 3. calc()は演算子の前後にスペースを入れる：calc(100% - 20px)。 4. 正しい値が分からないときはMDNでプロパティのページを確認するか、VS Codeの補完候補から選ぶ。

✅ 修正後のコード

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

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

🔗 関連するエラー

CSSのgapが効かない（Flexbox） — gapを書く場所か親のdisplay設定に問題がある
スマホで表示が小さい — viewport meta タグがない

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

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

📝 関連ブログ記事

プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
CSSとは？初心者向けにわかりやすく解説 — 文字の色・大きさの変え方
CSSでWebページにスタイルを付ける方法 — 色やフォントを付ける手順を解説

📖 関連する用語

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

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

CSSコースを始める →