VSCodeでブラウザ表示する方法完全ガイド｜HTMLを簡単にプレビューする

「VSCodeでHTMLファイルを作ったけど、どうやってブラウザで確認するの？」
「ファイルを保存するたびにブラウザを手動で更新するのが面倒…」

Visual Studio Code（VSCode）でWeb開発をしていると、作成したHTMLやCSSをブラウザで確認したくなります。しかし、毎回ファイルをダブルクリックしてブラウザを開いたり、更新ボタンを押したりするのは非効率的です。

VSCodeには、HTMLファイルを簡単にブラウザで表示し、さらにファイルを保存すると自動的にブラウザを更新してくれる便利な拡張機能があります。

この記事では、VSCodeでHTMLをブラウザ表示する複数の方法を、初心者にもわかりやすく解説します。

スポンサーリンク

方法の比較：どれを選べばいい？

VSCodeでHTMLをブラウザ表示する方法は主に3つあります。

方法おすすめ度メリットデメリット
Live Server★★★★★自動リロード、外部ブラウザで表示、スマホでも確認可能拡張機能のインストールが必要
Live Preview★★★★☆VSCode内でプレビュー、Microsoft公式デベロッパーツールが使いにくい
直接開く★☆☆☆☆インストール不要手動リロード必要、相対パスが正しく動作しない場合がある

初心者におすすめ：Live Server

最も人気があり、使いやすいのはLive Server拡張機能です。この記事では主にLive Serverの使い方を詳しく解説します。

方法1：Live Serverを使う（推奨）

Live Serverとは？

Live Serverは、VSCodeで最も人気のあるHTMLプレビュー拡張機能です。

主な特徴：

  • ワンクリックでローカルサーバーを起動
  • ファイルを保存すると自動的にブラウザをリロード（ライブリロード機能）
  • HTML、CSS、JavaScriptに対応
  • 外部ブラウザで表示されるため、デベロッパーツールも自由に使える
  • 同じWi-Fiに接続されたスマホからも確認可能

Live Serverのインストール方法

手順1：拡張機能を開く

VSCode左側のアクティビティバーにある「拡張機能」アイコンをクリックします。

ショートカットキーは Ctrl + Shift + X（Windowsの場合）または Cmd + Shift + X（Macの場合）です。

手順2：Live Serverを検索

検索ボックスに「Live Server」と入力します。

手順3：インストール

開発者が「Ritwick Dey」の「Live Server」を見つけて、「インストール」ボタンをクリックします。

インストールが完了すると、VSCode画面右下のステータスバーに「Go Live」というボタンが表示されます。

表示されない場合は、VSCodeを再起動してください。

Live Serverの使い方

基本的な起動方法

方法1：Go Liveボタンをクリック

  1. HTMLファイルを含むフォルダをVSCodeで開く
  • 「ファイル」→「フォルダーを開く」から、プロジェクトフォルダを選択
  1. HTMLファイルを開く
  2. VSCode右下の「Go Live」ボタンをクリック
  3. ブラウザが自動的に起動し、HTMLが表示されます

方法2：右クリックから起動

  1. HTMLファイルを右クリック
  2. 「Open with Live Server」を選択
  3. ブラウザが自動的に起動します

ライブリロード機能を体験する

Live Serverの最大の魅力は、ファイルを保存すると自動的にブラウザが更新される点です。

試してみましょう：

  1. Live Serverを起動した状態でHTMLファイルを編集
  2. Ctrl + S（Macの場合は Cmd + S）で保存
  3. ブラウザを見ると、自動的に変更が反映されています！

手動でブラウザの更新ボタンを押す必要はありません。

Live Serverの停止方法

Live Serverを停止するには、以下のいずれかの方法を使います。

  • VSCode右下の「Port: 5500」をクリック
  • HTMLファイルを右クリックして「Stop Live Server」を選択
  • コマンドパレット（Ctrl + Shift + P）から「Live Server: Stop Live Server」を実行

Live Serverの便利な設定

Live Serverの動作をカスタマイズすることで、さらに使いやすくなります。

設定の開き方：

  1. Ctrl + ,（Macの場合は Cmd + ,）で設定を開く
  2. 検索ボックスに「live server」と入力

または、settings.jsonファイルに直接設定を記述することもできます。

よく使う設定項目

1. ポート番号を変更する

デフォルトのポート5500が他のアプリで使われている場合、変更できます。

{
  "liveServer.settings.port": 5501
}

ランダムなポート番号を使いたい場合は0に設定します。

2. デフォルトブラウザを変更する

Chromeなど特定のブラウザで開きたい場合：

{
  "liveServer.settings.CustomBrowser": "chrome"
}

使用可能な値：chrome, firefox, edge, safariなど

3. 自動リロードの遅延時間を調整

ファイル保存後、ブラウザ更新までの待機時間（ミリ秒）：

{
  "liveServer.settings.wait": 500
}

4. 特定のファイルを監視対象から除外

SCSSやTypeScriptファイルなど、監視不要なファイルを除外：

{
  "liveServer.settings.ignoreFiles": [
    "**/*.scss",
    "**/*.ts"
  ]
}

5. ローカルネットワークで表示（スマホから確認）

同じWi-Fiに接続されたスマホやタブレットからアクセスできるようにする：

{
  "liveServer.settings.useLocalIp": true
}

この設定をすると、ブラウザに表示されるURLがhttp://192.168.x.x:5500/のような形式になり、このアドレスをスマホのブラウザに入力すればアクセスできます。

方法2：Live Previewを使う（Microsoft公式）

Live Previewとは？

Live Previewは、Microsoftが公式に開発している拡張機能です。

Live Serverとの大きな違いは、VSCode内部でHTMLをプレビュー表示できる点です。

Live ServerとLive Previewの違い：

項目Live ServerLive Preview
プレビュー場所外部ブラウザVSCode内部
デベロッパーツール完全に使える制限あり
開発元Ritwick DeyMicrosoft
公式サポートコミュニティMicrosoft公式

Live Previewのインストール方法

  1. 拡張機能を開く（Ctrl + Shift + X）
  2. 「Live Preview」と検索
  3. 開発者が「Microsoft」の「Live Preview」をインストール

Live Previewの使い方

方法1：VSCode内でプレビュー

  1. HTMLファイルを開く
  2. ファイルを右クリック
  3. 「Show Preview」を選択
  4. VSCode内に分割画面でプレビューが表示されます

方法2：外部ブラウザでプレビュー

  1. HTMLファイルを右クリック
  2. 「Show Preview in External Browser」を選択
  3. デフォルトのブラウザで開きます

Live Previewのメリット：

  • エディタとプレビューを同時に見られる
  • Microsoft公式なので長期的なサポートが期待できる
  • VSCodeの最新機能との互換性が高い

Live Previewのデメリット：

  • VSCode内のプレビューではデベロッパーツールが使いにくい
  • 画面が狭くなる

方法3：ブラウザで直接開く（非推奨）

拡張機能をインストールしたくない場合、HTMLファイルを直接ブラウザで開くこともできます。

方法：

  1. エクスプローラーでHTMLファイルを探す
  2. ファイルをダブルクリック
  3. デフォルトのブラウザで開きます

デメリット：

  • ファイルを更新するたびに手動でブラウザをリロードする必要がある
  • file://プロトコルで開かれるため、一部の機能が正しく動作しない
  • 相対パスが正しく解決されない場合がある
  • JavaScriptのfetch APIなどが動作しない

この方法が適しているケース：

  • 非常にシンプルなHTMLファイルを一度だけ確認したい
  • 拡張機能のインストールができない環境

よくあるトラブルと解決方法

トラブル1：Go Liveボタンが表示されない

原因：
単一のHTMLファイルだけを開いている状態では、Live Serverは起動できません。

解決方法：

  1. 「ファイル」→「フォルダーを開く」を選択
  2. HTMLファイルが含まれているフォルダを開く
  3. Go Liveボタンが表示されるようになります

トラブル2：ブラウザが自動で開かない

原因：
デフォルトブラウザの設定に問題があるか、拡張機能が正しく読み込まれていない可能性があります。

解決方法：

  1. VSCodeを再起動する
  2. それでも解決しない場合、settings.jsonに明示的にブラウザを指定
{
  "liveServer.settings.CustomBrowser": "chrome"
}

トラブル3：CSSやJavaScriptの変更が反映されない

原因：
ブラウザがファイルをキャッシュしている可能性があります。

解決方法：

  1. ブラウザのキャッシュをクリア（Ctrl + Shift + Delete）
  2. ハードリロード（Ctrl + Shift + R または Ctrl + F5）
  3. Live Serverの設定で完全リロードを有効化
{
  "liveServer.settings.fullReload": true
}

トラブル4：ポート5500が既に使用されている

原因：
他のアプリケーションがポート5500を使用しています。

解決方法：

settings.jsonで別のポート番号を指定します。

{
  "liveServer.settings.port": 5501
}

トラブル5：WSL2でLive Serverが動作しない

原因：
WSL2（Windows Subsystem for Linux 2）環境でブラウザのパスが正しく認識されていません。

解決方法：

settings.jsonにブラウザの完全パスを指定します。

{
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe"
}

パスは環境に応じて変更してください。

実践例：マルチディスプレイでの開発

2画面以上のディスプレイがある場合、Live Serverを最大限に活用できます。

おすすめの画面配置：

  1. メインディスプレイ：VSCodeを全画面表示
  • コードの編集に集中
  1. サブディスプレイ：ブラウザを全画面表示
  • リアルタイムでプレビューを確認

ワークフロー：

  1. メインディスプレイでHTMLやCSSを編集
  2. Ctrl + Sで保存
  3. サブディスプレイのブラウザが自動更新される
  4. 結果を確認しながら、次の編集に移る

このワークフローにより、「保存→ブラウザに切り替え→更新ボタンを押す→VSCodeに戻る」という手間が完全になくなります。

スマホ・タブレットでの確認方法

レスポンシブWebデザインを開発する場合、実機での確認が重要です。

設定手順：

  1. settings.jsonに以下を追加
{
  "liveServer.settings.useLocalIp": true
}
  1. Live Serverを起動
  2. ブラウザに表示されるURLをメモ（例：http://192.168.1.100:5500/）
  3. スマホやタブレットのブラウザで同じURLにアクセス

注意点：

  • PCとスマホが同じWi-Fiネットワークに接続されている必要があります
  • ファイアウォールの設定でポート5500が許可されている必要があります
  • Windowsの場合、初回起動時にファイアウォールの許可を求められることがあります

その他の便利な拡張機能

Live Server以外にも、Web開発を効率化する拡張機能があります。

Browser Preview

VSCode内にChromiumベースのブラウザを埋め込む拡張機能です。

特徴：

  • VSCodeから離れずにブラウザを操作できる
  • デベロッパーツールも使える
  • 複数のプレビューを同時に開ける

HTML Preview

シンプルなHTMLプレビュー拡張機能です。

特徴：

  • 軽量で動作が速い
  • VSCode内に分割画面で表示
  • 基本的なHTMLのプレビューに最適

PHP Server

PHPファイルをプレビューしたい場合に使用します。

特徴：

  • PHPの組み込みサーバーを起動
  • Live ServerはPHPに対応していないため、PHP開発には必須

よくある質問

Q1. Live ServerはPHPファイルに対応していますか？

いいえ、Live ServerはHTML、CSS、JavaScriptなどの静的ファイルのみに対応しています。

PHPなどのサーバーサイド言語を使う場合は、「PHP Server」拡張機能を使うか、XAMPPやMAMPなどのローカル開発環境が必要です。

Q2. Live ServerとLive Previewは同時に使えますか？

はい、両方インストールして使い分けることができます。

それぞれ異なるポートで動作するため、競合することはありません。ただし、使用目的に応じてどちらか一方を使うのが一般的です。

Q3. index.html以外のファイル名でも起動できますか？

はい、どんなHTMLファイル名でも起動できます。

Live Serverは開いているHTMLファイルまたはフォルダ内のHTMLファイルを自動的に検出します。

Q4. ポート番号を変更するとURLも変わりますか？

はい、ポート番号を変更すると、ブラウザに表示されるURLも変わります。

例えば、ポートを5501に変更すると、http://127.0.0.1:5501/でアクセスするようになります。

Q5. 商用プロジェクトでLive Serverを使っても大丈夫ですか？

Live Serverは開発用のツールであり、本番環境で使用することは想定されていません。

開発・テスト段階での使用には問題ありませんが、実際に公開する際は、ApacheやNginxなどの本格的なWebサーバーを使用してください。

まとめ

VSCodeでHTMLをブラウザ表示する方法について解説しました。

重要なポイントをおさらいします：

  • Live Server拡張機能が最もおすすめ（自動リロード、外部ブラウザ表示）
  • Go Liveボタンをクリックするだけで簡単に起動できる
  • ファイルを保存すると自動的にブラウザが更新される
  • settings.jsonでポート番号やブラウザをカスタマイズ可能
  • スマホからもアクセスできるため、レスポンシブデザインの確認が簡単
  • Live PreviewはVSCode内でプレビューしたい場合に便利

Live Serverを使えば、Web開発の効率が大幅に向上します。

ファイルを保存するたびに手動でブラウザを更新する手間がなくなり、コーディングに集中できるようになります。

ぜひLive Serverをインストールして、快適なWeb開発環境を手に入れてください！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました