VS CodeでHTMLをライブプレビューする方法
Visual Studio Code（VS Code）は、その強力な機能と拡張性で人気のあるコードエディタです。HTML、CSS、JavaScriptなどのWeb開発にも広く使用されています。コーディング中に変更内容をリアルタイムで確認できるライブプレビュー機能は、開発効率を大幅に向上させます。
VS Code自体はHTMLのビルトインプレビュー機能を提供していませんが、VS Code Marketplaceで利用可能な拡張機能を使用することで実現できます。この記事では、VS CodeでHTMLをライブプレビューする方法を詳しく解説します。
拡張機能を使用してライブプレビューを実現する
VS CodeでHTMLをライブプレビューするには、拡張機能をインストールする必要があります。Marketplaceで人気のあるHTMLプレビュー拡張機能をいくつかご紹介します。
| 拡張機能名 | 説明 |
|---|---|
| Live Server | HTML、CSS、JavaScriptの変更を自動的に検出し、ブラウザをリロードしてライブプレビューを提供します。 |
| Preview on Web Server | ローカルサーバーを起動し、Webサーバー上でHTMLプレビューを提供します。 |
| Browser Preview | VS Codeのエディタ内にブラウザを表示し、HTMLプレビューを提供します。 |
これらの拡張機能は、それぞれ異なる機能と動作を提供します。自分に最適なものを選択してインストールしましょう。
Live Serverのインストールと使用方法
ここでは、最も人気のある拡張機能の1つである「Live Server」を例に、インストール方法と使用方法を説明します。
- 拡張機能ビューを開く: VS Codeの左側にあるアクティビティバーから、拡張機能ビュー（Ctrl+Shift+X）を開きます。
- Live Serverを検索: 検索バーに「Live Server」と入力し、検索結果から「Live Server」拡張機能を見つけます。
- インストール: 「インストール」ボタンをクリックして、拡張機能をインストールします。
インストールが完了したら、HTMLファイルをVS Codeで開き、以下のいずれかの方法でLive Serverを起動します。
- HTMLファイルを右クリック: エディタ内でHTMLファイルを右クリックし、コンテキストメニューから「Open with Live Server」を選択します。
- ステータスバーのアイコンをクリック: VS CodeのステータスバーにLive Serverのアイコンが表示されます。「Go Live」をクリックしてサーバーを起動します。
Live Serverが起動すると、デフォルトのブラウザでHTMLファイルが自動的に開かれます。コードに変更を加えると、変更内容が自動的に検出され、ブラウザがリロードされてライブプレビューが表示されます。
サンプルコード
以下は、簡単なHTMLファイルの例です。
VS Codeライブプレビュー
こんにちは、世界！
このHTMLファイルをLive Serverで開くと、ブラウザに「こんにちは、世界！」という見出しが表示されます。
よくある質問
Q: 拡張機能をインストールしてもライブプレビューが機能しません。
A: いくつかの原因が考えられます。まず、拡張機能が正しくインストールされているか、有効になっているかを確認してください。また、ファイアウォールやウイルス対策ソフトがVS Codeやブラウザの通信をブロックしていないか確認してください。
Q: ライブプレビューのブラウザを変更できますか？
A: はい、多くの拡張機能では設定でデフォルトのブラウザを変更できます。拡張機能の設定を開いて、ブラウザの項目を確認してください。
Q: ライブプレビュー中に特定のポートを使用できますか？
A: はい、多くの拡張機能では設定でポート番号を指定できます。拡張機能の設定を開いて、ポート番号の項目を確認してください。