un tronc
ホームページ制作

VS CodeのLive Server入門｜公開前のページを自分のパソコンで確かめる手順と、ダブルクリックで開くときとの違い

この記事は約4分で読めます

公開日
読む時間
約4分

こんにちは！アントロンのNaokoです。

ホームページのちょっとした修正、公開する前に見た目を確かめたいと思ったことはありませんか？

私もHTMLを確かめるときに、VS Code（無料のコードエディタ）の拡張機能「Live Server」を使っています。この記事では、2026年9月28日に、お店の「お知らせ」ページの見本を作ってLive Serverで確かめた手順を、実際の画面で紹介します。

先に結論です。

  • 右下の「Go Live」を押すだけで、ページがブラウザで開きます
  • ファイルを保存すると、ブラウザの表示が自動で新しい内容に変わります
  • HTMLファイルをダブルクリックで開くと動かない部分も、Live Serverなら公開後に近い形で確かめられます

Live Serverとは

Live Serverは、VS Codeに入れて使う拡張機能です。パソコンの中に簡易的なWebサーバーを立て、開いているフォルダのHTML・CSS・JavaScriptをブラウザに表示します。入れ方と説明はVisual Studio Marketplace の Live Server のページにあります。

私の環境は、Live Serverが5.7.10、VS Codeが1.137.0です（2026年9月28日時点）。

今回作った見本ページ

確かめるために、次の4つのファイルを1つのフォルダに入れました。

  • index.html：ページ本体
  • style.css：見た目
  • news.json：お知らせの中身（日付と文）
  • script.js：news.json を読み込んで、お知らせの一覧に並べる

お知らせを別のファイル（news.json）に分けたのは、お知らせを足すたびにHTMLを触らずに済むようにするためです。ただ、この作りはファイルをダブルクリックで開くと動きません。あとで実際の画面をお見せします。

手順1：フォルダを開いて「Go Live」を押す

VS Codeで［ファイル］→［フォルダーを開く］からフォルダを開き、index.html を選びます。Live Serverが入っていると、画面の右下に「Go Live」が出ます。

VS Codeでindex.htmlを開いた画面。右下にGo Liveが出ている

「Go Live」を押すと、右下の表示が「Port : 5500」に変わり、サーバーが動き始めます。

Live Serverが動いているときの右下の表示。Port : 5500

手順2：ブラウザで開いたページを確かめる

同時にブラウザが開き、http://127.0.0.1:5500/index.html でページが表示されました。127.0.0.1 は、自分のパソコンを指すアドレスです。news.json のお知らせ2件も並んでいます。

Live Serverで開いたページ。お知らせが2件表示されている

手順3：直して保存すると、ブラウザの表示が自動で変わる

次に、index.html の説明文に「10月は14日（水）がお休みです。」と書き足して保存しました。ブラウザの再読み込みボタンは押していません。保存しただけで、表示が新しい文に変わりました。

保存したあとのページ。説明文に10月のお休みが足されている

直す、保存する、見る、をくり返すときに、ブラウザに切り替えて再読み込みする手間がなくなります。

ダブルクリックで開くと、お知らせが出ない

比べるために、同じ index.html をファイルのままブラウザで開きました。アドレス欄に「ファイル」と出ている状態です。見出しと説明文は出ますが、お知らせの欄は「お知らせを読み込めませんでした」になりました。

ファイルのまま開いたページ。お知らせを読み込めなかった表示

私が使ったChromeでは、ファイルのまま開いたページから news.json を読み込めませんでした。ブラウザの多くは、ファイルのまま開いたページを、同じフォルダにあるファイルとも別の出どころとして扱うためです（MDN：同一オリジンポリシー）。Live Serverで開くと、公開したときと同じく http:// でページが届くので、読み込めます。ダブルクリックで見た表示と、公開したあとの表示が食い違う、ということを減らせます。

Live Serverでできないこと

Live Serverが自分で配れるのは、静的ファイル（HTML・CSS・JavaScriptのように、サーバーで処理せずにそのまま配るファイル）です。画像1の説明にある「dynamic pages」は、PHPなどを別のサーバーで動かし、その表示をLive Server Web Extensionで自動的に読み直す使い方のことで、Live Serverだけでは PHP は動きません。

  • PHPは動きません。WordPressのテーマの確認には使えません。WordPressをパソコンで動かすには、Local や XAMPP など、PHPとデータベースが入った環境が要ります
  • お問い合わせフォームの送信のように、サーバー側で処理するものは確かめられません

使い終わったら止める

右下の「Port : 5500」を押すと、サーバーが止まり、表示が「Go Live」に戻ります。

まずは手元のHTMLで試してみてください

VS CodeにLive Serverを入れて、手元にあるHTMLのフォルダを開き、「Go Live」を押してみてください。ダブルクリックで開いたときと表示が違う所があれば、それが公開前に確かめておきたい所です。

ホームページの修正や運用について相談したい方は、お問い合わせフォームからどうぞ。

最後まで読んでくださりありがとうございました！

コメント

あわせて読みたい

ブログ一覧へ