HTMLやCSSを書き始めたばかりの頃、よくつまずくのが「直したのに画面が変わらない」という現象です。プログラミングの理解とは関係のないところで止まってしまうので、余計にモヤモヤします。今回は、この「反映されない」を解決する4つのチェックポイントをまとめます。

HTMLを直したのに変わらない場合

① 保存していない

VS Codeのタブ名の横に「●」（丸いマーク）が付いていたら、まだ保存されていません。Cmd + S（WindowsはCtrl + S）で保存してください。

② ブラウザをリロードしていない

保存しただけでは、ブラウザの画面は自動で更新されません。F5（MacはCmd + R）でリロードします。

③ 開いているファイルとブラウザで見ているファイルが別物

①②を確認しても変わらない場合、実は別のファイルを見ていることがあります。ブラウザのアドレス欄に表示されているパスと、今VS Codeで編集しているファイルのパスが一致しているか確認してください。

たとえば、practice/session-06-html-css/index.htmlのようにセッションごとのフォルダを作って進めていくと、「編集していたのは今のセッション用のファイルなのに、ブラウザでは前のセッションのフォルダを開いたままだった」ということはよくあります。焦って中身を疑う前に、まずアドレス欄のパスを声に出して読んでみるくらいでちょうどいいです。

なお、VS Codeの設定で自動保存（files.autoSave）を有効にしておくと、①の保存忘れ自体を防げます。設定はCmd + ,（WindowsはCtrl + ,）から検索できます。

CSSがまったく効かない場合

上の3つを確認してもCSSだけ反映されない場合は、別の原因です。

④ HTMLとCSSがそもそも繋がっていない

index.htmlの<head>タグの中に、次の記述があるか確認してください。

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

これがないと、CSSファイルの中身がどれだけ正しくても一切読み込まれません。あわせて、次の2点もよくある見落としです。

  • index.htmlとstyle.cssが同じフォルダに置かれているか
  • ファイル名のタイポ（style.cssとstyles.cssは別のファイルとして扱われます）

AIへの確認の仕方

「反映されない」とだけAIに伝えると、原因の特定に何往復もかかることがあります。次のように、今の状態をセットで伝えると早く解決します。

HTMLを直したのに画面が変わりません。
保存とリロードは確認済みです。
index.htmlの中身と、ブラウザのアドレス欄のURLを貼ります。
ファイルの対応関係がずれていないか確認してください。

CSSが効かない場合は、index.htmlの<head>部分をそのまま貼って「linkタグの記述とファイル名を確認してください」と伝えると、的確に見てもらえます。

どちらの場合も、コードの中身を長々と説明しようとするより、今見えている画面と、確認済みの項目を先に伝える方が、AIとのやり取りが短く済みます。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全24セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください