HTML
🔥 スタイルが反映されない
CSSファイルが読み込まれていない
😰 こんな症状
CSS ファイルを作ったのに、文字色や背景色が変わらない。HTMLとCSSを別ファイルで作り始めたばかりの初学者がよく遭遇するよ。
🔍 原因
ブラウザはHTMLファイルだけでは外部CSSファイルの存在を知らないよ。<head>内に<link>タグを書いてHTMLとCSSを「つなぐ」必要があるんだ。<link>タグがない、またはhref属性のファイル名にスペルミスがあると、CSSが読み込まれずスタイルが反映されないよ。
❌ エラーが起きるコード
<link rel="stylesheet" href="stlye.css">
<!-- ファイル名のスペルミス -->✅ 直し方
1. <head>の中に<link rel="stylesheet" href="style.css">があるか確認する。 2. hrefのファイル名と実際のCSSファイル名が完全に一致しているか確認（大文字小文字も区別される）。 3. CSSファイルがHTMLファイルと同じフォルダにあるか確認。別フォルダなら href="css/style.css" のようにパスを書く。 4. ブラウザの開発者ツール（F12）→Networkタブで、CSSファイルが404エラーになっていないか確認する。
✅ 修正後のコード
<link rel="stylesheet" href="style.css">
<!-- 正しいファイル名 -->この解決法は役立ちましたか？
🔗 関連するエラー
- 外部CSSが読み込まれない — link要素のrel="stylesheet"の書き忘れ
- ページのレイアウトが崩れる — タグの閉じ忘れ
- 保存しても変更が反映されない — ブラウザを手動で更新していない
- faviconが表示されない — faviconのパスまたは形式が間違っている
- metaタグが反映されない — metaタグの位置や属性が間違っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説