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

Visual Studio Code（ビジュアル・スタジオ・コード）はマイクロソフト社製のソースコードエディタです。Visual Studio Code はWindows、macOS、Linuxで利用可能で、HTMLを含むさまざまなプログラミング言語でコードを書き、編集することができます。では、作成したHTMLコードを実行して表示を確認したい場合はどうすればよいのでしょうか。幸いなことに、Visual Studio CodeにはVisual Studio Code内からHTMLコードを簡単に実行できる拡張機能が多数用意されています。また、ターミナルを使用してHTMLファイルを実行することも可能です。この記事では、Visual Studio CodeでHTMLファイルを実行する方法を紹介します。

方法 1

方法 1 の 4:

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

PDF形式でダウンロード

1
Visual Studio Codeを起動する　Visual Studio Codeは青いリボンのようなアイコンです。このVisual Studio CodeアイコンをクリックしてVisual Studio Codeを起動しましょう。Windowsの場合は「スタート」メニュー、Macの場合は「アプリケーション」フォルダー、Linuxの場合は「アプリ」メニューにあります。
- Visual Studio Codeをまだダウンロードしていない場合は、https://code.visualstudio.com/（英語のみ）から無料でダウンロードすることができます。ウェブページ上のDownload（ダウンロード）ボタンをクリックしてブラウザまたは「ダウンロード」フォルダーからインストールファイルを開き、画面の指示に従ってインストールを完了します。
2
HTMLファイルを開くか新規作成する　以下のいずれかの手順でファイルを開くか新規作成しましょう。
- ファイルを新規作成するには、上部のメニューバーのファイルをクリックして新規ファイルをクリックし、HTMLコードを入力していきます。
- 既存ファイルを開くには、画面上部のメニューバーのファイルをクリックしてファイルを開く...をクリックし、開きたいHTMLファイルが保存されている場所に移動し、そのファイルをクリックして選択し、開くをクリックします。
3
ファイルをHTML形式で保存する　Visual Studio CodeでHTMLファイルを実行する準備ができたら、まずそのファイルをHTML形式で保存しましょう。HTMLファイルを保存すると、任意のブラウザで実行できるようになります。以下の手順でVisual Studio CodeでHTMLファイルを保存しましょう。
- 画面上部のメニューバーのファイルをクリックします。
- 名前を付けて保存...をクリックします。
- 「ファイル名」の横にファイル名を入力します。
- 「ファイルの種類」の横にあるドロップダウンメニューからHTMLを選択します。
- 保存をクリックします。
広告

方法 2

方法 2 の 4:

ターミナルを使用する

PDF形式でダウンロード

Visual Studio Codeは青いリボンのようなアイコンです。このVisual Studio CodeアイコンをクリックしてVisual Studio Codeを起動しましょう。Windowsの場合は「スタート」メニュー、Macの場合は「アプリケーション」フォルダー、Linuxの場合は「アプリ」メニューにあります。
まだの場合は、既存のHTMLファイルを開くか、HTMLファイルを新規作成し、HTML形式で保存しましょう。すでにHTMLファイルを開いている場合は、画面上部のそのファイルのタブをクリックすると、そのファイルが表示されます。
3
新しいターミナルを開く　新しいターミナルを開くには、画面上部のターミナルをクリックし、新しいターミナルをクリックします。Visual Studio Codeで拡張機能を使用せずにHTMLファイルを実行するには、ターミナルを使用するのが唯一の方法です。また、これは最も複雑な方法でもあります。
- また、画面上部の表示をクリックし、ターミナルをクリックして開くことも可能です。
4
cdの後にHTMLファイルのパスを入力し、↵ Enterキーを押す　これで、HTMLファイルが保存されている場所に移動します。例えば、HTMLファイルが「ドキュメント」フォルダーにある場合は、cd \Users\ユーザー名\ドキュメントと入力し、Enterキーを押しましょう。
- HTMLファイルがOSと異なるドライブレターに保存されている場合は、ターミナルでそのドライブレターに変更してからHTMLファイルのパスに移動しましょう。そのドライブレターに変更するには、そのドライブレター（D:ドライブの場合はD:）を入力し、Enterキーを押します。
- HTMLファイルが保存されている場所がわからない場合は、画面上部のそのファイルのタブを右クリックしてパスのコピーをクリックし、ターミナルにcdと入力してその直後にパスを貼り付け、そのパスの末尾にあるファイル名を削除してEnterキーを押しましょう。
- HTMLファイルへのパス内のフォルダー名にスペースが含まれている場合、ターミナルではそのフォルダーが保存されている場所に移動することができません。WindowsのエクスプローラーまたはMacのFinderを使用してフォルダー名にスペースが含まれるフォルダーが保存されている場所に移動し、それらのフォルダー名を変更してスペースを削除します（例えば、「HTML Files」というフォルダーがある場合は、代わりに「HTML_Files」に変更しましょう）。
5
startの後にHTMLファイルのファイル名を入力し、↵ Enterキーを押す　例えば、「index」のHTMLファイルを実行したい場合は、start index.htmlと入力し、Enterキーを押しましょう。これで、そのファイルが別ウィンドウで開き、そのファイルをプレビューすることができます。
- プレビューを閉じるには、ウィンドウの上部にある「×」アイコンをクリックするだけです。^{[1]X出典文献}
広告

方法 3

方法 3 の 4:

「HTML Preview（HTMLプレビュー）」拡張機能を使用する

PDF形式でダウンロード

Visual Studio Codeは青いリボンのようなアイコンです。このVisual Studio CodeアイコンをクリックしてVisual Studio Codeを起動しましょう。Windowsの場合は「スタート」メニュー、Macの場合は「アプリケーション」フォルダー、Linuxの場合は「アプリ」メニューにあります。
画面左側のメニューバーの四角が4つ並んだようなアイコンです。これで、拡張機能の検索メニューが表示されます。
検索バーは画面左側の拡張機能メニューの上部にあります。これで、検索クエリに一致する拡張機能の一覧が表示されます。「HTML Preview」はVisual Studio Codeの拡張機能で、Visual Studio Code内からHTMLファイルを分割画面または全画面表示モードでプレビューできるようにするものです。
拡張機能の一覧の一番上にある最初の拡張機能のはずです。「Thomas Haakon Townsend（トーマス・ホーコン・タウンゼント）」というパブリッシャーが開発しました。真ん中に「5」と書かれたオレンジ色の盾のようなアイコン（HTML5のロゴ）です。
をクリックする　拡張機能メニューの右側にある情報ページの「HTML Preview」という見出しの下にあります。これで、拡張機能がインストールされます。インストールが完了するまで数分待ちましょう。
まだの場合は、既存のHTMLファイルを開くか、HTMLファイルを新規作成し、HTML形式で保存しましょう。すでにHTMLファイルを開いている場合は、画面上部のそのファイルのタブをクリックすると、そのファイルが表示されます。
7
分割画面プレビューボタンをクリックする　左側の虫眼鏡の付いた分割画面のようなアイコンです。画面右上にあります。これで、HTMLファイルのプレビューがVisual Studio Codeの分割画面に表示されます。
- Altキーを押しながらプレビューボタンをクリックすると、HTMLコードの全画面プレビューが表示されます。
- プレビューを閉じるには、画面上部のプレビュータブにある「×」アイコンをクリックするだけです。
広告

方法 4

方法 4 の 4:

「open in browser（ブラウザで開く）」拡張機能を使用する

PDF形式でダウンロード

Visual Studio Codeは青いリボンのようなアイコンです。このVisual Studio CodeアイコンをクリックしてVisual Studio Codeを起動しましょう。Windowsの場合は「スタート」メニュー、Macの場合は「アプリケーション」フォルダー、Linuxの場合は「アプリ」メニューにあります。
画面左側のメニューバーの四角が4つ並んだようなアイコンです。これで、拡張機能の検索メニューが表示されます。
検索バーは画面左側の拡張機能メニューの上部にあります。これで、検索クエリに一致する拡張機能の一覧が表示されます。「open in browser」はVisual Studio Codeの拡張機能で、Visual Studio Code内から任意のブラウザでHTMLファイルを開くことができます。
一覧の一番上にある最初の拡張機能のはずです。すべて小文字のもので、「TechER」というパブリッシャーが開発しました。その拡張機能をクリックして選択しましょう。
をクリックする　拡張機能メニューの右側にある情報ページの「open in browser」という見出しの下にあります。これで、拡張機能がインストールされます。インストールが完了するまで数分待ちましょう。
まだの場合は、既存のHTMLファイルを開くか、HTMLファイルを新規作成し、HTML形式で保存しましょう。すでにHTMLファイルを開いている場合は、画面上部のそのファイルのタブをクリックすると、そのファイルが表示されます。
コンテキストメニューが表示されます。
8
（デフォルトブラウザで開く）をクリックする　これで、HTMLファイルがデフォルトブラウザで開き、HTMLファイルを表示することができます。^{[2]X出典文献}
- また、Open in Other Browser （他のブラウザで開く）をクリックし、任意のブラウザをダブルクリックして開くことも可能です。
- デフォルトブラウザを選択するように求められた場合は、ファイルを開きたいブラウザをクリックし、OKをクリックしましょう。
広告