Visual Studio Codeの使い方【HTML入門編】｜フォルダ作成・ファイル保存・Live Serverプレビューの手順

2025年10月26日2025年11月8日

Web制作・プログラミングの学習を始めたばかりの方へ。
この記事では、無料のコードエディタ「Visual Studio Code（VS Code）」を使って、
HTMLファイルを作成し、保存して、Live Serverでブラウザプレビューする基本操作をやさしく解説します。

Contents

フォルダを作成してVS Codeで開こう

Vscodeの準備がまだの場合か、下記サイトからダウンロードを行いましょう。

ポイント：フォルダ単位で開くと、HTML・CSS・画像などの複数ファイルを1つのプロジェクトとして扱えます。
これが「Webサイト制作の基本構成」です。

ファイル名は「半角英数字」「拡張子.html」にしましょう。
日本語ファイル名や全角スペースはトラブルの原因になります。

補足：index.htmlとは？
Webサイトのトップページによく使われるファイル名が「index.html」です。
サーバーにアップすると、自動的に最初に読み込まれる仕組みになっています。

VS Codeでは、タグを入力すると自動で終了タグ（閉じタグ）が補われます。
たとえば：

<p>

と入力して Enter を押すと、
自動的に

<p></p>

が挿入されます。

Emmet（エメット）機能：VS Codeには、HTMLの入力を短縮できる「Emmet」という仕組みが標準搭載されています。例：h1 と入力して Tabキー → <h1></h1> が自動挿入されます。

HTMLを書いていると、インデント（字下げ）が崩れることがあります。
VS Codeでは、保存時に自動整形（フォーマット）できます。

「Prettier」拡張機能を入れておくと、自動整形の精度が上がります。

ここまで入力したHTMLを実際にブラウザで見てみましょう。

注意：「Go Live」ボタンが表示されない場合は、拡張機能「Live Server」がインストールされているか確認しましょう。

Web制作の学習では、「書いて → 保存して → 確認して」の流れがとても大切です。

慣れてくると、Ctrl + S（保存）→ Alt + Tab（ブラウザ切り替え）でテンポよく確認できるようになります。
コードが崩れたときは、「どこでタグを閉じ忘れたか？」を確認してみましょう。

Q. Go Liveが表示されません。
→ 拡張機能「Live Server」が入っているか確認し、再起動してみましょう。

Q. プレビューが真っ白になります。
→ 保存していない可能性があります。Ctrl + Sで保存して再読み込みしてみましょう。

Q. 日本語が文字化けします。
→ HTMLの<head>内に <meta charset="UTF-8"> を入れておきましょう。