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ファイル自体は読み込めているのに効かない場合、波カッコの閉じ忘れやセミコロン忘れが原因です。エラーのある行以降のスタイルが全部無視されます。
/* ❌ セミコロン忘れ → 以降のスタイルが無効になる */
h1 {
color: red /* ← ; がない */
font-size: 24px;
}
/* ❌ 波カッコの閉じ忘れ */
.box {
background: blue;
/* } を書き忘れると以降のスタイルもすべて無効 */
p {
font-size: 16px; /* これも効かなくなる */
}開発者ツールの「Styles」パネルで、打ち消し線（取り消し）がついているプロパティがあれば、その部分に文法エラーか優先度の問題があります。
まとめ：確認チェックリスト
- linkタグの
rel="stylesheet"のスペルは正しいか hrefのパスは実際のファイル構造と一致しているか（大文字/小文字含む）- CSSファイルを保存したか（Ctrl+S）
- ブラウザを強制リロードしたか（Ctrl+Shift+R）
- 開発者ツールのNetworkでCSSが200で読み込まれているか
- 開発者ツールのStylesに打ち消し線のプロパティはないか
- 波カッコとセミコロンが正しく書かれているか
解決しなかった？
エンジニアに質問する →