CSSを書いたのに画面が真っ白になる
💬 質問
style.css にCSSを書いたのに、ブラウザで見ると何も変わりません。画面が真っ白のままです。
✅ 回答
CSSが効かない原因はほぼ3つに絞られます。上から順に確認してください。
チェック1：linkタグの書き方
<!-- ✅ 正しい書き方 -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- ❌ よくある間違い -->
<link rel="stylesheet" href="Style.css"> <!-- 大文字/小文字が違う -->
<link rel="styleseet" href="style.css"> <!-- スペルミス -->
<link rel="stylesheet" href="css/style.css"> <!-- フォルダ構造が違う -->確認ポイント：
rel="stylesheet"のスペルが正しいかhrefのファイル名が実際のファイル名と完全一致しているか（大文字/小文字含む）- linkタグが
<head>の中にあるか（bodyに書いても動くが非推奨）
チェック2：ファイルの場所
| フォルダ構造 | hrefの書き方 |
|---|---|
| HTMLとCSSが同じフォルダ | href="style.css" |
| CSSがcssフォルダ内 | href="css/style.css" |
| HTMLがpagesフォルダ内 | href="../style.css" |
チェック3：保存とキャッシュ
- VS Codeでファイル名の横に●がある → まだ保存されていない（Ctrl+S）
- 保存したのに反映されない → ブラウザのキャッシュが原因。Ctrl+Shift+R で強制リロード
開発者ツールで確認する方法
- F12で開発者ツールを開く
- 「Network」タブを見る
- style.cssが404（赤字）になっていたら → パスが間違っている
- style.cssが200（正常）なのに効かない → CSSの中身にセミコロン忘れ等の文法エラーがある
CSS内部の文法エラーも原因になる
CSSファイル自体は読み込めているのに効かない場合、波カッコの閉じ忘れやセミコロン忘れが原因です。エラーのある行以降のスタイルが全部無視されます。
解決しなかった？
エンジニアに質問する →