VS Codeはコードを書くエディタです。まず公式サイトから自分のOS・CPUに合うものを入れ、作業フォルダを開いてHTMLを保存できる状態まで進めます。拡張機能は必要になってから追加します。
Windows
- 公式ダウンロードページを開く。
- Windowsと、自分のPCに合うx64・Arm64等を選ぶ。
- 通常の個人利用ではUser Installerを検討する。組織PCは管理方針を確認する。
- インストーラーの案内に従い完了する。
- VS Codeを起動してフォルダを開く。
PATH等の追加タスクは自分の用途で選びます。企業・学校のPCで管理者権限が必要な場合は、管理方針に従ってください。
macOS
公式からIntel・Apple Silicon等の対象を確認してダウンロードし、アプリをApplicationsへ移動します。codeコマンドを使う場合は、公式の案内に従ってPATHへ追加します。
掲載しているインストール画面
以下は2025年に掲載した画面です。表示や選択肢はバージョン・OSによって異なります。インストールする時点の公式案内も確認し、自分の環境に合った項目を選んでください。
最初のHTMLファイル
- 作業用の新しいフォルダを作る。
- File → Open Folder等でそのフォルダを開く。
- index.htmlを作成し、UTF-8で保存する。
- ブラウザで開くか、必要なローカルHTTPサーバーで確認する。
初めて開くプロジェクトではWorkspace Trustの案内を読みます。他人から受け取ったプロジェクトの実行や拡張機能を、内容を確認せず許可しないようにします。
保存と表示を、この短いページで確かめる
空のindex.htmlへ次を貼り、保存してブラウザで開きます。「VS Codeで保存したページ」という見出しが出れば、ファイルを用意できています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>最初の保存確認</title>
</head>
<body>
<h1>VS Codeで保存したページ</h1>
<p>文章を変え、保存してからブラウザを再読み込みします。</p>
</body>
</html>次に見出しを「保存できました」へ変え、もう一度保存・再読み込みします。文字が変わらないときは、VS Codeの保存先と、ブラウザのアドレスにあるファイルの場所を比べてください。インストールだけでなく、編集した内容が同じファイルへ保存されることを確認できます。
迷ったとき
- ファイルが見つからない：保存先のフォルダを確認する。
- HTMLが変わらない：保存しているファイルとブラウザで開くファイルを照合する。
- codeが使えない：PATHの設定とターミナル再起動を確認する。
- 導入できない：OSの条件とPCの管理方針を確認する。
次はHTMLで最初のページを作る手順へ進めます。追加の道具は目的別の拡張機能で確認できます。
