書いたHTMLをブラウザで開けました。でもこれから何度も「ちょっと直しては、見て」をくり返します。そのたびにファイルを開き直すのは大変。そこで今回は、作ったものをサッと確認するコツを覚えます。これを知ると、練習のテンポが一気に上がります。
どっちを使えばいい？
- まずは ①保存 → 更新 で、しくみを体で覚える
- 慣れて「更新が面倒」と感じたら、②Live Server に切り替える
どちらでも、やっていることは同じ「書いたHTMLを画面で確かめる」。自分がラクな方でかまいません。
このレッスンのまとめ
- 直したら 保存 → ブラウザを更新 で確認できる（
⌘/Ctrl + S→⌘/Ctrl + R） - Live Server を使うと、保存した瞬間に自動で反映される
- 「変わらない！」ときは、まず保存と更新を疑う
② Live Serverで、自動プレビュー
「毎回“更新”を押すのも地味に面倒……」——その気持ちに応えてくれるのが Live Server です。以前入れた拡張機能、いよいよ出番です。
使い方はかんたん。VSCodeで index.html を開いた状態で、ファイルの上で右クリック → 「Open with Live Server」 を選ぶだけ。
index.htmlを右クリック → Open with Live Serverすると自動でブラウザが開き、ページが表示されます。すごいのはここから。VSCodeで直して保存した瞬間、ブラウザが自動でパッと最新の見た目に変わるのです。もう「更新」を押す必要はありません。
これで「書く → 見る」のくり返しがぐっとラクになりました。 :::