HTML
外部CSSが読み込まれない
link要素のrel="stylesheet"の書き忘れ
こんな症状
link要素のrel="stylesheet"を書き忘れてCSSが適用されない。CSSファイルを読み込むときに起きやすいミスだよ。
まず試す
<link rel="stylesheet" href="style.css"> のように rel="stylesheet" を正しく書く。
html
<link rel="stylesheet" href="style.css">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓rel 属性が無い
→ rel="stylesheet" を追加する。 - ✓rel のスペルミス
→ rel="stylesheet" を正確に書く。 - ✓それでも当たらない
→ Networkタブで style.css が200で読み込まれているか確認する。
なぜ起きる？
ブラウザは<link>タグのrel属性を見て「このファイルは何の役割か」を判断するよ。rel="stylesheet"がないと、ブラウザはそのファイルをCSSとして認識せず、スタイルが適用されないんだ。relのスペルミスも同じ結果になるよ。
✕ エラーが起きるコード
<link href="style.css">
<!-- rel 属性がない -->✓ 直したコード
<link rel="stylesheet" href="style.css">✅ 直ったか確認
スタイルが適用され、NetworkタブでCSSが読み込まれていればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- favicon（ファビコン）が表示されない — faviconのパス・形式・キャッシュの問題
- スタイルが反映されない — CSSファイルが読み込まれていない
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説