CSSでクラス名が「unknown word」と表示される原因と対処法

CSSでクラス名を指定しても「unknown word」と表示され、スタイルが適用されない場合があります。コピペでクラス名が正しいにも関わらず効かない場合、いくつかの原因が考えられます。

原因1：全角文字や不可視文字の混入

クラス名に全角スペースやゼロ幅スペースなどの不可視文字が含まれている場合、CSSは正しく認識できません。エディタ上で見えなくてもコピー時に混入することがあります。

原因2：ハイフンやアンダースコアの扱い

クラス名にハイフン（-）やアンダースコア（_）を使用する際はCSS側でも同じ表記で指定する必要があります。誤って空白や異なる文字で入力すると「unknown word」と表示されます。

原因3：CSSの記述ミスやセレクタの書き方

クラスセレクタは必ずピリオド（.）をつけて指定します。例えば。

.bbb { color: red; }

もし bbb { color: red; } のようにピリオドがないと「unknown word」となります。

原因4：エディタやリンターの誤検知

VSCodeや他のエディタでLintや拡張機能が誤って警告することがあります。実際にはブラウザ上では正しく動作する場合もあります。ブラウザで確認しましょう。

対処法

• クラス名を手入力で再確認する
• 不可視文字や全角スペースを削除する
• セレクタの先頭にピリオド（.）を忘れない
• ブラウザで動作確認してエディタ警告の誤検知を見極める

まとめ

「unknown word」と表示される場合、ほとんどは不可視文字、全角文字、セレクタの書き方ミス、またはエディタの警告によるものです。クラス名を正しく確認し、CSS記述を正確にすることで問題は解決します。