Visual Studio CodeでHTMLファイルを実行する方法

Visual Studio Codeは、マイクロソフト社製のソースコードエディタである。Windows、macOS、Linuxで利用できる。HTMLを含む様々なコーディング言語に対応している。しかし、HTMLコードを実行して見た目を確認したいときはどうすればいいのだろう。 幸いなことに、Visual Studio Codeには、Visual Studio Code内からHTMLコードを簡単に実行できる拡張機能がたくさんあります。 また、ターミナルを使ってHTMLファイルを実行することもできます。このWikiHowでは、Visual Studio CodeでHTMLファイルを実行する方法を説明します。

方法1

HTMLファイルを作成、開く、保存する

1. Visual Studio Codeを開きます。 Visual Studio Codeには青いリボンのようなアイコンがあります。 Visual Studio Codeのアイコンをクリックすると、Visual Studio Codeが起動します。 Windowsの場合は「アプリケーション」フォルダ、Macの場合は「アプリケーション」フォルダ、Linuxの場合は「アプリ」メニューの中にあります。

   • まだダウンロードしていない場合は、Visual Studio Codeを.NETから無料でダウンロードできます。 ウェブページのダウンロードボタンをクリックし、ウェブブラウザまたはダウンロードフォルダからインストールファイルを開きます。指示に従ってインストールを完了します。
2. HTMLファイルを開くか、新規作成します。 次のいずれかの手順で、新しいファイルを開くか作成します：

   • 新規ファイルを作成するには、上部のメニューバーで「ファイル」をクリックします。 次に「新規ファイル」をクリックします。をクリックします。
   • 既存のファイルを開くには、上部のメニューバーで「ファイル」をクリックします。 次に「ファイルを開く」をクリックします。 開きたいHTMLファイルに移動し、それをクリックして選択します。 次に「開く」をクリックします。
3. ファイルをHTMLファイルとして保存します。 Visual Studio CodeでHTMLファイルを実行する準備ができたら、まずファイルをHTMLファイルとして保存する必要があります。 HTMLファイルを保存すれば、好きなブラウザで見ることができます。 以下の手順で、Visual Studio CodeでHTMLファイルを保存します：

   • 上部のメニューバーで「ファイル」をクリックします。
   • 名前を付けて保存」をクリックします。
   • ファイル名」の横にファイル名を入力します。
   • Save as type "の隣にあるドロップダウンメニューで "HTML "を選択します。
   • 保存をクリックします。

方法2

ターミナルを使用する

1. Visual Studio Codeを開きます。 Visual Studio Codeには青いリボンのようなアイコンがあります。 Visual Studio Codeアイコンをクリックして、Visual Studio Codeを起動します。 Windowsのスタートメニュー、Macのアプリケーションフォルダ、Linuxのアプリメニューにあります。
2. HTMLファイルを開くか、新規作成します。 まだ開いていない場合は、既存のHTMLファイルを開くか、新しいHTMLファイルを作成してHTML形式で保存します。 すでにHTMLファイルを開いている場合は、画面上部のHTMLファイルを含むタブをクリックして表示します。
3. 新しいターミナルを開きます。 そのためには、画面上部のターミナルをクリックします。 次に「新規ターミナル」をクリックします。 ターミナルは、Visual Studio Codeで拡張機能を使わずにHTMLファイルを実行する唯一の方法です。 また、最も複雑な方法でもあります。

   • または、画面上部の［表示］をクリックし、［ターミナル］をクリックします。
4. cd と入力し、その後に HTML ファイルのパスを入力して ↵ Enter キーを押します。 これでHTMLファイルの場所に移動します。 例えば、HTMLファイルがDocumentsフォルダのHTMLファイルにある場合、cd ↵と入力してEnterを押します。

   • HTMLファイルがオペレーティング・システムと異なるドライブ文字に保存されている場合、HTMLファイルのパスに移動する前に、ターミナルでそのドライブ文字に変更する必要があります。 そのためには、単にドライブ文字（例：D:ドライブの場合はD:）を入力し、Enterキーを押します。
   • HTMLファイルの保存先がわからない場合は、画面上部のHTMLファイルのタブを右クリックし、「パスのコピー」をクリックします。 ターミナルにcdと入力し、その直後にパスを貼り付けます。 パスの最後にあるファイル名を削除し、Enterキーを押します。
   • HTMLファイルへのパス内のフォルダー名にスペースがある場合、ターミナルはそのフォルダーに移動できません。 Windowsの場合はファイルエクスプローラ、Macの場合はFinderを使って、名前にスペースが入っているフォルダに移動し、それらのフォルダの名前を変更してスペースを削除します（「HTML Files」というフォルダがある場合は、代わりに「HTML_Files」に変更します）。
5. startの後にHTMLファイル名を入力し、↵Enterを押す。例えば、インデックスのHTMLファイルを実行したい場合、start index.htmlと入力してEnterを押します。 これでHTMLファイルが別ウィンドウで起動し、HTMLファイルをプレビューすることができます。

   • プレビューを閉じるには、ウィンドウ上部の「x」アイコンをクリックします。

方法3

HTMLプレビュー」拡張機能を使う

1. Visual Studio Codeを開きます。 Visual Studio Codeには青いリボンに似たアイコンがあります。 Visual Studio Codeアイコンをクリックして、Visual Studio Codeを起動します。 Windowsでは「スタート」メニュー、Macでは「アプリケーション」フォルダ、Linuxでは「アプリ」メニューにあります。
2. Extensions ボタンをクリックします。 左側のメニューバーにある四角が4つ並んだようなアイコンです。 拡張機能の検索メニューが表示されます。
3. 検索バーに「HTML Preview」と入力します。検索バーは左の拡張機能メニューの一番上にあります。 検索クエリに一致する拡張機能のリストが表示されます。 「HTMLプレビュー」はVisual Studio Code用の拡張機能で、Visual Studio Code内からHTMLファイルを分割画面またはフルウィンドウモードでプレビューすることができます。
4. HTMLプレビュー "拡張機能をクリックします。 拡張機能リストの一番上にある最初の拡張機能です。 Thomas Haakon Townsendによって作成されました。 真ん中に「5」があるオレンジの盾のようなアイコン（HTML 5のロゴ）が含まれています。
5. インストールをクリックします。 拡張機能メニューの右側にある情報ページの「HTMLプレビュー」ヘッダーの下にあります。 これで拡張機能がインストールされます。 インストールが終わるまで数分待ちます。
6. 新しいHTMLファイルを開くか作成します。 まだインストールしていない場合は、既存のHTMLファイルを開くか、新しいHTMLファイルを作成してHTML形式で保存します。 すでにHTMLファイルを開いている場合は、画面上部のHTMLファイルを含むタブをクリックして表示します。
7. 画面分割プレビューボタンをクリックします。 左側に虫眼鏡のついた分割画面のようなアイコンです。 画面の右上にあります。 これにより、Visual Studio Code内でHTMLファイルのプレビューが分割表示されます。

   • Altを押しながらプレビューボタンをクリックすると、HTMLコードの全画面プレビューが表示されます。
   • プレビューを閉じるには、画面上部のプレビュータブにある「x」アイコンをクリックします。

方法4

ブラウザで開く」拡張機能を使う

1. Visual Studio Codeを開きます。 Visual Studio Codeには青いリボンに似たアイコンがあります。 Visual Studio Codeアイコンをクリックして、Visual Studio Codeを起動します。 Windowsでは「スタート」メニュー、Macでは「アプリケーション」フォルダ、Linuxでは「アプリ」メニューにあります。
2. Extensions ボタンをクリックします。 左側のメニューバーにある四角が4つ並んだようなアイコンです。 拡張機能の検索メニューが表示されます。
3. 検索バーに「open in browser」と入力します。検索バーは左の拡張機能メニューの一番上にあります。 検索条件に一致する拡張機能のリストが表示されます。 "ブラウザで開く" は Visual Studio Code 用の拡張機能で、Visual Studio Code 内から任意の Web ブラウザを使用して HTML ファイルを開くことができます。
4. ブラウザで開く "拡張機能をクリックします。 リストの一番上にある最初の拡張機能です。 全て小文字で、TechERによって作成されたものです。 拡張機能をクリックして選択します。
5. インストールをクリックします。 拡張機能メニューの右にある情報ページの "ブラウザで開く "ヘッダーの下にあります。 これで拡張機能がインストールされます。 インストールが終わるまで数分待ちます。
6. 新しいHTMLファイルを開くか作成します。 まだインストールしていない場合は、既存のHTMLファイルを開くか、新しいHTMLファイルを作成してHTML形式で保存します。 すでにHTMLファイルを開いている場合は、画面上部のHTMLファイルを含むタブをクリックして表示します。
7. HTML.codeの任意の箇所を右クリックします。 コンテキストメニューが表示されます。
8. デフォルトのブラウザで開く」をクリックします。 デフォルトのウェブブラウザでHTMLファイルが開きます。 これでHTMLファイルを見ることができます。

   • または、「他のブラウザで開く」をクリックし、選択したウェブブラウザをダブルクリックすることもできます。
   • デフォルト・ブラウザの選択を求められたら、ファイルを開きたいブラウザをクリックし、Okをクリックします。

この記事は、CC BY-NC-SAの下で公開されている「 How to Run a HTML File in Visual Studio Code」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。