Web制作・プログラミングの学習を始めたばかりの方へ。
この記事では、無料のコードエディタ「Visual Studio Code（VS Code）」を使って、
HTMLファイルを作成し、保存して、Live Serverでブラウザプレビューする基本操作をやさしく解説します。
フォルダを作成してVS Codeで開こう
VS Codeの準備がまだの場合は、下記の記事を参考に、ダウンロードとインストールを行いましょう。
プロジェクトフォルダを作る
- デスクトップなどに「html-practice」などの練習フォルダを作成します。
- VS Codeを起動し、メニューから「ファイル → フォルダを開く」をクリック。
- 先ほど作ったフォルダを選択します。
- また、デスクトップにフォルダを作成して、そのフォルダをVS CodeにドラッグしてもOKです
フォルダ単位で開くと、HTML・CSS・画像などの複数ファイルを1つのプロジェクトとして扱えます。
これが「Webサイト制作の基本構成」です。
HTMLファイルを作成してみよう
新規ファイルを作成
- 左上の「新しいファイル」アイコンをクリック。
index.htmlという名前で保存します。
ファイル名は「半角英数字」「拡張子.html」にしましょう。
日本語ファイル名や全角スペースはトラブルの原因になります。
補足：index.htmlとは？
Webサイトのトップページによく使われるファイル名が「index.html」です。サーバーにアップすると、自動的に最初に読み込まれる仕組みになっています。
HTMLを入力してみよう
HTMLタグの補完機能を体験
VS Codeでは、タグを入力すると自動で終了タグ（閉じタグ）が補われます。
たとえば：
<p>
<p>と入力して Enter を押すと、自動的に<p></p>が挿入されます。
<p></p>
が挿入されます。
また、VS Codeには、HTMLを効率よく入力できる「Emmet（エメット）」という機能が標準で用意されています。たとえば、次のように入力します。
p
続けてTabキーを押すと、次のHTMLタグへ展開されます。
<p></p>
同じように、h1と入力してTabキーを押すと、次のように展開されます。
<h1></h1>
また、HTMLファイルで半角の!を入力してTabキーを押すと、HTMLの基本構造をまとめて作成できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
入力したコードをきれいに整える（保存時の自動整形）
HTMLを書いていると、インデント（字下げ）が崩れることがあります。
VS Codeでは、保存時に自動整形（フォーマット）できます。
自動整形の設定方法
- 右下の歯車マーク →「設定」をクリック。
- 検索欄に
format on saveと入力。 - 「Editor: Format On Save」にチェック。
「Prettier」拡張機能を入れておくと、自動整形の精度が上がります。
Live Serverをインストールしよう
「Live Server」は、作成したHTMLファイルをブラウザで確認するためのVS Code拡張機能です。初めて使用するときは、次の手順でインストールします。
- VS Code左側の「拡張機能」アイコンをクリックします。
- 検索欄に
Live Serverと入力します。 - 提供元が「Ritwick Dey」のLive Serverを選択します。
- 「インストール」をクリックします。
インストールが完了すると、VS Codeの画面右下に「Go Live」が表示されます。
右クリック→「Open with Live Server」でプレビュー
ここまで入力したHTMLを、実際にブラウザで確認してみましょう。
index.htmlを開き、エディタ内で右クリックします。- 「Open with Live Server」を選択します。
- ブラウザが自動的に開き、HTMLが表示されます。
- HTMLを編集して保存すると、変更内容がブラウザに自動で反映されます。
右下の「Go Live」をクリックして起動することもできます。
「Open with Live Server」が表示されない場合
Live Serverがインストールされているか確認してください。インストール後も表示されない場合は、VS Codeを一度終了して再起動します。また、HTMLファイルだけでなく、制作に使用するフォルダ全体をVS Codeで開いているか確認しましょう。
PHPファイルはLive Serverでは実行できません
Live Serverは、主にHTML・CSS・JavaScriptの表示確認に使用します。PHPファイルを実行するときはXAMPPなどのローカル環境を起動し、http://localhost/から始まるURLで確認してください。
ファイルの保存と確認をくり返す（学習の基本）
Web制作の学習では、「書いて → 保存して → 確認して」の流れがとても大切です。
Web制作では、「コードを書く→保存する→ブラウザで確認する」という操作を繰り返します。ショートカットキーを使うと、効率よく表示を確認できます。
| 操作 | Windows | Mac |
|---|---|---|
| ファイルを保存する | Ctrl + S | Command + S |
| アプリを切り替える | Alt + Tab | Command + Tab |
よくある質問（FAQ）
- 「Go Live」が表示されません
-
VS Codeに拡張機能「Live Server」がインストールされているか確認してください。
インストール済みでも表示されない場合は、次の方法を試します。
- VS Codeを一度終了して再起動する
index.htmlなどのHTMLファイルを開く- HTMLファイルだけでなく、制作フォルダ全体をVS Codeで開く
エディタ内で右クリックし、「Open with Live Server」が表示されるかも確認しましょう。
- 「Open with Live Server」が表示されません
-
拡張機能「Live Server」がインストールされていないか、無効になっている可能性があります。
VS Code左側の「拡張機能」を開き、「Live Server」を検索してください。「インストール」と表示されている場合は、まだインストールされていません。
インストール後は、VS Codeを再起動してから、もう一度HTMLファイル上で右クリックします。
- プレビュー画面が真っ白になります
-
次の項目を確認してください。
- HTMLファイルを保存しているか
<body>内に文字や要素を記述しているか- 編集中のHTMLファイルをLive Serverで開いているか
- HTMLタグの記述が途中で崩れていないか
- ファイルの拡張子が
.htmlになっているか
ファイルを保存するショートカットキーは次のとおりです。
- Windows：
Ctrl + S - Mac：
Command + S
保存後、ブラウザを再読み込みして確認しましょう。
- HTMLを修正してもブラウザに反映されません
-
まず、ファイルが保存されているか確認してください。VS Codeのファイル名の横に白い丸が表示されている場合は、まだ保存されていません。
保存しても反映されない場合は、次の方法を試します。
- ブラウザを再読み込みする
- Live Serverを一度停止し、再度起動する
- 編集中のファイルと、ブラウザで表示しているファイルが同じか確認する
Live Serverを停止するときは、VS Code右下のポート番号または「Go Live」と表示されていた場所をクリックします。
- CSSが反映されません
-
HTMLからCSSファイルを正しく読み込めているか確認します。
<link rel="stylesheet" href="css/style.css">
特に、次の点を確認してください。
- CSSファイルを保存しているか
- フォルダ名とファイル名が一致しているか
hrefに指定したパスが正しいかstyle.cssが実際にcssフォルダ内にあるか- ファイル名の大文字と小文字が一致しているか
たとえば、次の構成では
href="css/style.css"と指定します。html-practice ├── index.html └── css └── style.css - 日本語が文字化けします
-
HTMLの
<head>内に、次の文字コード指定があるか確認してください。<meta charset="UTF-8">
あわせて、VS Code画面右下に表示される文字コードが「UTF-8」になっているか確認します。
文字コードは、基本的にUTF-8で統一しましょう。
- ブラウザのURLが
file:///から始まっています -
HTMLファイルをダブルクリックして開くと、URLが
file:///から始まります。Live Serverを使用している場合は、一般的に次のようなURLで表示されます。
http://127.0.0.1:5500/
または、
http://localhost:5500/
file:///になっている場合は、VS Codeに戻り、HTMLファイル上で右クリックして「Open with Live Server」を選択してください。 - PHPファイルもLive Serverで確認できますか？
-
Live Serverは、主にHTML・CSS・JavaScriptの表示確認に使用する拡張機能です。PHPのプログラムを実行する機能はありません。
PHPファイルを実行するときは、XAMPPなどのローカル環境を起動し、次のようなURLから確認します。
http://localhost/php-practice/
PHPの実行環境については、次の記事で確認できます。
では早速トレーニング開始です！
