「スタイルが反映されない」の原因は？

ブラウザはHTMLファイルだけでは外部CSSファイルの存在を知らないよ。内にタグを書いてHTMLとCSSを「つなぐ」必要があるんだ。タグがない、またはhref属性のファイル名にスペルミスがあると、CSSが読み込まれずスタイルが反映されないよ。

「スタイルが反映されない」の直し方は？

内にがあるか、href のファイル名が実物と一致しているか確認する。

← エラー辞典に戻る

HTML

スタイルが反映されない

CSSファイルが読み込まれていない

こんな症状

CSS ファイルを作ったのに、文字色や背景色が変わらない。HTMLとCSSを別ファイルで作り始めたばかりの初学者がよく遭遇するよ。

まず試す

<head> 内に <link rel="stylesheet" href="style.css"> があるか、href のファイル名が実物と一致しているか確認する。

html

<head>
  <link rel="stylesheet" href="style.css">
</head>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓href のファイル名がスペルミス
→ 実際のCSSファイル名と完全一致させる（大文字小文字も）。
✓<link> タグ自体が無い
→ <head> 内に <link rel="stylesheet" href="..."> を追加する。
✓CSSが別フォルダにある
→ href="css/style.css" のようにパスを正しく書く。

なぜ起きる？

ブラウザはHTMLファイルだけでは外部CSSファイルの存在を知らないよ。<head>内に<link>タグを書いてHTMLとCSSを「つなぐ」必要があるんだ。<link>タグがない、またはhref属性のファイル名にスペルミスがあると、CSSが読み込まれずスタイルが反映されないよ。

✕ エラーが起きるコード

<link rel="stylesheet" href="stlye.css">
<!-- ファイル名のスペルミス -->

✓ 直したコード

<link rel="stylesheet" href="style.css">
<!-- 正しいファイル名 -->

✅ 直ったか確認

ページのスタイル（色・余白等）が反映され、NetworkタブでCSSが200で読み込まれればOK。

🆘 まだ直らないときは

DevToolsのNetworkタブでCSSが404になっていないか確認しよう。キャッシュなら Ctrl+Shift+R で再読み込み。

Q&Aで質問する →

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

🔗 関連するエラー

外部CSSが読み込まれない — link要素のrel="stylesheet"の書き忘れ
ページのレイアウトが崩れる — タグの閉じ忘れ
保存しても変更が反映されない — ブラウザを手動で更新していない
favicon（ファビコン）が表示されない — faviconのパス・形式・キャッシュの問題
metaタグが反映されない — metaタグの位置や属性が間違っている

🔗 別カテゴリの関連エラー

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

HTMLレッスン3：リンクと画像で根本から理解する →

✏️ 手を動かして練習

このテーマの図解ドリルで実際に書いて確認する →

📝 関連ブログ記事

プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説

📖 関連する用語

🚀 HTMLレッスン3：リンクと画像で根本解決しよう！

このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。

HTMLレッスン3：リンクと画像へ →