小規模なLPやコーディング案件では、ブラウザを何度も手動更新する作業が地味に時間を取ります。私もHTMLとCSSを直したあと、保存してタブを戻って再読み込みを繰り返していた頃がありました。
この記事では、VS CodeのLive Server拡張を使って、保存した変更をブラウザにすぐ反映する手順をまとめます。Figmaから書き出した静的ページの確認や、WordPressに載せる前の見た目チェックにも使えます。
この記事でわかること
- Live Server拡張のインストールと起動方法
- index.htmlを起点にプレビューする基本操作
- 更新が反映されないときの切り分け手順
- 他のプレビュー方法との使い分け
先に結論
- 向いている人: 静的HTML/CSSをローカルで素早く確認したいWeb制作者、フリーランスの小規模案件担当者
- 向いていない人: ReactやVueなどビルドが必要なフロントエンド一式をそのまま動かしたい人（別ツールが向きます）
- 私のおすすめ: まずは Visual Studio Code に Live Server を入れ、プロジェクト直下の
index.htmlから起動する
私は納品前の最終確認で、Live Serverを開いたタブと開発者ツールを並べて見ることが多いです。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
Live Serverとは何か
Live Serverは、ローカルに置いたHTMLファイルを簡易Webサーバー経由で配信し、ファイル保存と同時にブラウザへ変更を送る拡張機能です。公開用の本番サーバーではなく、自分のPC内だけで動くプレビュー環境だと考えてください。
通常、HTMLをブラウザで直接開く（file://）方法でも表示はできます。ただし、相対パスの挙動や一部のJavaScript制限で、本番に近い確認がしづらい場面があります。Live Serverは http://127.0.0.1:5500 のようなアドレスで配信するため、リンクや画像パスの確認が楽になります。
| 方法 | 向く場面 | 注意点 |
|---|---|---|
| Live Server | 静的HTML/CSSの反復確認 | ポート番号が他アプリと被ることがある |
| ブラウザで直接開く | 1枚だけの超簡易確認 | file:// 特有の挙動差 |
| 本番・ステージング | 公開直前の最終確認 | 反映に時間がかかる |
事前準備（VS Codeとフォルダ構成）
- Visual Studio Code をインストールする
- プロジェクト用フォルダを1つ作り、そこに
index.htmlとcss/style.cssなどを置く - VS Codeで ファイル → フォルダーを開く から、そのフォルダを開く
フォルダ構成の例です。
project/
index.html
css/
style.css
img/
logo.png
index.html がルートにあることが重要です。Live Serverは、右クリックで選んだHTMLを起点にページを開きます。下層だけを単体で開くと、相対パスがずれて画像が出ないことがあります。
Live Server拡張のインストール手順
- VS Code左の 拡張機能（四角が4つ並んだアイコン）を開く
- 検索欄に
Live Serverと入力する - Ritwick Dey 作の「Live Server」を選び、インストールを押す
- インストール後、右下に Go Live が表示されればOK
似た名前の拡張は複数あります。迷ったら、ダウンロード数が多く、作者名が Ritwick Dey のものを選ぶのが無難です。
プレビューを起動する手順
- エクスプローラーで
index.htmlを開く - エディタ上で右クリックし、Open with Live Server を選ぶ
- 既定ブラウザが開き、
http://127.0.0.1:5500/付近のURLで表示される - HTMLやCSSを編集して 保存（Ctrl+S / Cmd+S） すると、ブラウザが自動更新される
右下の Go Live を押す方法でも同じです。止めるときは、もう一度 Port: 5500 をクリックして停止します。
CSSの数値を1pxずつ直す作業では、保存の瞬間に反映されるので、感覚をつかむのが早いです。
HTMLとCSSを正しく読み込むための書き方
プレビューが真っ白、またはデザインが崩れるときは、リンクパスを先に疑います。
index.html の例:
<link rel="stylesheet" href="css/style.css">
<img src="img/logo.png" alt="ロゴ">
- CSSは
./css/style.cssのように、index.html からの相対パスで書く - 大文字小文字は本番環境と揃える（Linuxサーバーでは区別される）
- 外部CDNのCSSはそのまま読み込めるが、オフライン時は表示が変わる
ブラウザの開発者ツール（F12）で Network タブを開き、404になっているファイルがないか確認すると原因が早いです。
レスポンシブ確認のコツ
Live Serverで開いたブラウザは、開発者ツールの デバイスモード（Ctrl+Shift+M / Cmd+Shift+M）で幅を変えられます。スマホ幅にした状態でCSSを直し、保存して反映を見る流れが、私の制作ではいちばん多いです。
よく触るのは次の3点です。
- メディアクエリの境界 … 768px前後でレイアウトが崩れないか
- 画像の
max-width: 100%… 横はみ出しが出ていないか - フォントサイズ … 実機より小さく見えがちなので、行間も一緒に確認する
PCとスマホでHTMLを分けている案件では、同じフォルダ内に index.html と sp.html を置き、それぞれ Live Server で開き替える方法もあります。ファイル名を変えるだけなので、プレビュー環境を増やさずに済みます。
更新が反映されないときの切り分け
保存しても見た目が変わらない場合、次の順で確認します。
- 別タブで古い
file://ページを開いていないか（Live ServerのURLか確認） - ブラウザキャッシュ … 強制再読み込み（Ctrl+Shift+R / Cmd+Shift+R）
- CSSのセレクタミス … 開発者ツールの Elements で該当要素にスタイルが乗っているか
- Live Serverのポート競合 … 右下のポート番号をクリックして再起動
- 拡張の設定 …
settings.jsonでliveServer.settings.portを変更（例: 5501）
ポート変更の例:
"liveServer.settings.port": 5501
それでも直らないときは、一度 VS Code を再起動し、プロジェクトフォルダを開き直します。私の環境では、スリープ復帰後に接続が切れることがあり、そのときは Go Live の再起動で直ることが多いです。
他のプレビュー方法との使い分け
Live Serverは 静的ページの見た目確認に向いています。案件の流れでは、次のように使い分けるイメージです。
- コーディング中: Live ServerでHTML/CSSを高速に回す
- コンポーネント整理: Figma側でデザインを固め、書き出し画像と見比べる（Figma連携の記事はこちら）
- 本番反映前: ステージングやWordPressのプレビューで最終確認
ビルドツール（Viteやwebpack）を使う案件では、各ツール付属の開発サーバーが主役になります。Live Serverは ビルド前の素のHTML/CSS や、ランディングページの一部切り出し で力を発揮します。
案件別の使い方イメージ
| 案件タイプ | Live Serverの役割 |
|---|---|
| コーポレート下層ページ | ヘッダー・フッター込みの見た目確認 |
| キャンペーンLP | ヒーロー画像とCTAボタンの余白調整 |
| メール用HTMLの下地 | 幅600px前後の単一カラム確認 |
| WordPress化前の静的版 | テーマ組み込み前のデザイン固定 |
納品物がWordPressの場合でも、先に静的HTMLで合意を取ってから実装に入るフローでは、クライアント確認用のURLをローカルで見せるのではなく、ステージングへ上げる前の自分用チェックとして Live Server が活きます。差分が小さい修正（余白2px、行間0.1など）を連続で入れる日は、特に時短になります。
案件が小さいときは、わざわざ環境を増やさず Live Server だけで十分なことが多いです。
よくある質問
Q. Live Serverは無料で使えますか？
A. VS Code本体とLive Server拡張は、個人の学習・制作用途では無料で使えます。VS Codeのライセンスや社内利用ルールは、利用環境のポリシーを確認してください。
Q. スマホ実機で同じページを見られますか？
A. 同一Wi-Fi内なら、PCのローカルIPアドレスとポート（例: http://192.168.0.10:5500/）でアクセスできる場合があります。ただしファイアウォール設定が必要なこともあり、最終確認は本番またはステージングで行うのが安全です。
Q. PHPやWordPressテーマも動きますか？
A. Live Serverは基本的に 静的ファイル配信 です。PHPの動作確認には別途ローカルサーバー（MAMP、Docker、Xserverのステージングなど）が必要です。WordPressテーマは、静的HTMLを先に固めてから組み込む流れが向きます。
Q. Cursorでも同じ拡張は使えますか？
A. CursorはVS Code互換の拡張に対応しているため、同様にLive Serverを入れられることが多いです。エディタを分けている場合は、プレビュー用にどちらか一方に統一すると設定が散らかりません。
Q. 複数人で同じページを見る共有方法は？
A. Live Server単体はローカル向けです。クライアント共有には、GitHub Pagesのプレビュー、ステージングサーバー、またはNetlifyのドラフトデプロイなどを使います。制作途中の細かい確認は自分のPCで Live Server、外部共有はステージング、と役割を分けると混乱が減ります。
まとめ
VS CodeのLive Server は、HTMLとCSSの修正を保存直後にブラウザへ反映できる、小規模制作向けの定番ツールです。まずは index.html を起点に Open with Live Server で起動し、反映されないときはURL・パス・ポートの3点を確認してください。
次の一手は、手元の案件フォルダで拡張を入れて1回プレビューを回すことです。慣れたら、開発者ツールを並べて画像の404やCSSの当たりを一緒に見ると、仕上げが早くなります。
納品前にエディタ環境をそろえたい方は、Visual Studio Code の公式情報もあわせて確認してください。
関連記事
