CSS
🎯 スタイルが特定の要素に当たらない
セレクタ名のタイポ
😰 こんな症状
CSS を書いたのに、一部の要素だけスタイルが変わらない。
🔍 原因
セレクタ名のタイポ。HTML の class 名と CSS のセレクタ名が一致していない。
❌ エラーが起きるコード
.header { color: red; }
/* HTML: <div class="Header"> 大文字小文字不一致 */✅ 直し方
HTML の class="card" と CSS の .card { } のスペルが完全に一致しているか確認。開発者ツールで打ち消し線が入っているスタイルは上書きされている。
✅ 修正後のコード
.Header { color: red; }
/* HTML のクラス名と一致させる */この解決法は役立ちましたか？
🔗 関連するエラー
- 余白がおかしい — margin と padding の混同
- Flexbox でレイアウトが崩れる — display: flex を子要素に書いている
- 幅を指定したのにはみ出す — box-sizing が content-box のまま
- スマホで表示が小さい — viewport meta タグがない
- z-index が効かない — position が設定されていない
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説