『1冊ですべて身につく HTML&CSSとWebデザイン 入門講座』でHTML/CSSの学習を進めていて、「VS Code（VSコード）」を触っていたのですが、「CSSを変更してもブラウザに反映されない…」という現象にハマりました😱
いろいろ調べて原因を切り分けた結果、「そもそもVSコードでのファイルの開き方が間違っていた」という、初心者あるあるな落とし穴だったので、同じところで詰まる人向けにまとめておきます（画面の見方については、前回の「その１」をご参照ください🙏）
VSコードのLive Serverで自動反映されない現象が起きた
「Live Server」って拡張機能入れたけど、HTMLとCSSを変更しても反映されないんだよなぁ・・・。なんでだろ。
なんか抜けてるんじゃないのか？
私も同じ。手動でページを再読み込みしないと変わらないんだよねぇ・・。「保存 → 画面更新」が自動化されるんじゃなかったっけ？
いいところに気づきましたね。「Live Server」あるあるです。HTMLとCSSが反映されないときは、だいたい次のどれかが原因です。上から順に確認してみましょう👇
そもそもLive Serverを起動させるには？
「Live Server」を起動するには、ステータスバー右下にある「Go Live」をクリックします。デフォルトではONの状態になっていないので、ここをクリックして起動させましょう。
⬇️
こんな目立たないところにON／OFFあるの！？ これは気づきにくいね
確かにこれはわかりづらいな。・・・ただ、これONにしても、まだ自動反映されないみたい。まだ何か足らないのかな？
おい、ロボット！ いろいろと細かい設定とかあるのか、早く続きの解説してくれよ😤
落ち着いて、大丈夫ですよ😊
Go LiveをONにしただけでは「必ず自動反映される」わけではない、というのがポイントです。ここ、初心者が一番ハマるところなので順に整理しますね。
VSコードで「フォルダ」を開く必要がある
自動反映しないときの一番多い原因です。
❌ NG
- Finder（エクスプローラー）から
index.htmlを直接開いている - 単体ファイルだけ開いている
⬇️
✅ OK
- VS Codeで
「ファイル → フォルダーを開く」
→ HTMLとCSSが入っているフォルダごと開く
→ その中のHTMLを右クリック → Open with Live Server
👉 フォルダ単位で開かないと、CSS監視がうまく動きません。
⬇️
なるほど。Finderから直接開いていたから、自動反映されなかったんだ。VSコードから開かないとダメだったんだね
あれ・・？？？ あるくさん、さっき「【Go Live】をONにしていたけど自動反映されなかった」って言ってたよね。そもそもFinderからファイルを直接開いていたら、Live ServerをONにできずエラーになっちゃうんじゃなかったっけ？
矛盾しているな。いったいどういうことなんだ・・・
その疑問はとても鋭いですね。
実は Go Live 自体はONにできていても、「自動反映」が効かないケース があるんです。
ポイントはここです👇
VS Codeで、自動反映させたいファイルが入っている「フォルダ」を開いているかどうか
FinderからHTMLファイルを直接開いた場合、
- Go Live は起動する（他のフォルダをVSコードで開いている場合）
- ブラウザも開く
けれど、VS Codeが「このフォルダ全体を監視する」状態になっていないため、CSSやHTMLの変更を検知できず、自動反映されません。
つまり、
- ❌ ファイル単体を開いている → 自動反映されない
- ✅「ファイル → フォルダーを開く」で作業フォルダを開く → 自動反映される
という違いなんですね。登山で例えるなら、山の入口（フォルダ）に入らずに、いきなり山小屋（ファイル）にワープしている状態です。それだと登山道の変化（＝ファイル変更）を追えない、というわけです。
今回の件は設定ミスではなく、VS Codeの使い方の「仕様」なので、一度ここを理解してしまえば、次からは迷わなくなりますよ 😊
⬇️
⬇️
まさしくこのリストディレクトリが開いて、「なんじゃこりゃ！」状態だったよ・・・。そういうカラクリだったんだね。
ふん！ オイラは最初からそれくらいわかっていたけどな。そんなこともわからないとはニンゲンもたいしたことないぜ（・・・う〜ん、全然気づいてなかった😅）
こらっ！ ライ太！！ 口が悪いよっ！ もう〜見た目は可愛いのに・・・
へっ、見た目が可愛いのはオイラの武器だからな！ じゃあなニンゲンども！ 次はもう少し成長した頃に、また山で会おうぜ！ ………あっ、フォルダ開くの忘れるなよーっ！！
まとめ
いろいろあったけど、仕組みはわかったよ。最後どうすればいいのか、まとめてくれるかい？
了解しました。以下まとめますね。
Live Serverを使うときの基本ルール
1️⃣ 編集したいファイルが入っているフォルダを、VS Codeの「ファイル」→「フォルダーを開く」で開く
2️⃣ VSコードで編集したいHTMLファイルを右クリック → 【 Open with Live Server 】を選択して、Live Serverを起動する
3️⃣ 保存すれば自動で画面が更新される（「ファイル」→「自動更新」にチェックをつけておくと便利です）
この設定やっておくと、変更した内容がすぐ確認できるから便利だよね。なんか自分が動かしている感があるというか、もっとやる気になってきたよ！
ほんとだね。これで新しい課題に取り組むのも楽しみになってきたよ。
良かったです。引き続きVSコードを使いこなして、HTML&CSSを学んでいきましょう！！
というわけで、今回は「VSコードの自動反映が適用されない」問題について、つまずいた点をご紹介しました。これからもこんなアクシデントはいっぱいあると思いますが、地道に一歩ずつ乗り越えていこうと思います。今年もご愛読ありがとうございました！😀
