2026年4月14日
VS Codeとは？
VS Code（ビジュアルスタジオコード） は、Microsoftが無料で提供しているコードエディタです。「コードエディタ」とは、プログラムを書くための専用のテキストエディタのことです。
メモ帳でもHTMLやCSSを書くことはできますが、VS Codeを使うと次のような便利な機能が使えます。
- シンタックスハイライト：コードに色がついて見やすくなる
- 入力補完：タグやプロパティ名を途中まで入力すると候補が出る
- エラーの検出：間違いをリアルタイムで教えてくれる
- 拡張機能：便利なプラグインを追加できる
世界中のプロのエンジニアも使っている定番ツールで、完全無料です。プログラミングを本格的に学ぶなら、最初からVS Codeを使うことをおすすめします。
インストール前の確認
VS CodeはWindows・Mac・Linuxに対応しています。自分のパソコンのOSを確認してから進めましょう。
| OS | 確認方法 |
|---|---|
| Windows | スタートボタン右クリック →「システム」→「Windowsの仕様」で確認 |
| Mac | 画面左上のリンゴマーク →「このMacについて」で確認 |
💡 Macの場合： Intel Mac と Apple Silicon（M1/M2/M3）でダウンロードするファイルが異なります。「このMacについて」でチップの種類を確認してください。
🔗 あわせてHTMLとは？初心者向け解説もチェックしてみましょう。
Windowsへのインストール手順
手順1：公式サイトにアクセスする
ブラウザで https://code.visualstudio.com にアクセスします。
手順2：インストーラーをダウンロードする
トップページの青い「Download for Windows」ボタンをクリックします。.exe ファイルがダウンロードされます。
手順3：インストーラーを実行する
- ダウンロードした
VSCodeSetup-xxx.exeをダブルクリックして起動 - 「使用許諾契約書の同意」画面で「同意する」を選んで「次へ」
- インストール先フォルダはデフォルトのままで「次へ」
- 「追加タスクの選択」画面で以下にチェックを入れると便利：
- 「デスクトップ上にアイコンを作成する」
- 「PATHへの追加」（上級者向けだが入れておくと後で役立つ）
- 「インストール」ボタンをクリックして待つ
- 「完了」ボタンをクリックするとVS Codeが起動する
⚠️ 注意： インストール中に「このアプリがデバイスに変更を加えることを許可しますか？」というダイアログが出たら「はい」をクリックしてください。
Macへのインストール手順
手順1：公式サイトにアクセスする
ブラウザで https://code.visualstudio.com にアクセスします。
手順2：インストーラーをダウンロードする
「Download for Mac」ボタンの横にある矢印（▼）をクリックして、自分のMacに合ったバージョンを選びます。
- Intel Mac → Intel chip を選ぶ
- M1/M2/M3 Mac → Apple Silicon を選ぶ
.zip ファイルがダウンロードされます。
手順3：アプリをインストールする
- ダウンロードした
.zipファイルをダブルクリックして解凍する Visual Studio Code.appが現れるので、アプリケーションフォルダにドラッグ＆ドロップする- アプリケーションフォルダから VS Code をダブルクリックして起動する
- 「インターネットからダウンロードされたアプリです」というダイアログが出たら「開く」をクリック
💡 Dockに追加しておくと便利： VS Codeが起動したら、Dock上のアイコンを右クリック →「オプション」→「Dockに追加」を選ぶと、次回から簡単に起動できます。
📖 詳しくは学習ロードマップで解説しています。
VS Codeの初期設定（日本語化）
VS Codeは最初は英語表示です。日本語に変更しましょう。
- VS Codeを起動する
- 左側のアイコンから「拡張機能」（四角が4つ並んだアイコン）をクリック
- 検索欄に
Japaneseと入力する - 「Japanese Language Pack for Visual Studio Code」が出てきたら「Install」をクリック
- インストール後、右下に「Restart to apply」ボタンが出るのでクリック
- VS Codeが再起動して日本語になる
最初のHTMLファイルを作ってみよう
VS Codeが使えるようになったら、さっそくHTMLファイルを作ってみましょう。
- VS Codeを起動して「ファイル」→「新しいファイル」をクリック
- 「ファイル」→「名前を付けて保存」で
index.htmlという名前で保存 - 以下のコードを入力する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>VS Codeで作った最初のページ！</h1>
<p>プログラミング学習スタート！</p>
</body>
</html>▶ プレビュー
- Ctrl+S（Mac は Cmd+S）で保存する
- 保存したファイルをブラウザにドラッグ＆ドロップして開く
「VS Codeで作った最初のページ！」という見出しが表示されれば成功です！
💡 便利なショートカット：
!と入力して Tab キーを押すと、HTMLの骨組みが自動で入力される（Emmet機能）- Ctrl+S（Cmd+S）：ファイルを保存
- Ctrl+Z（Cmd+Z）：元に戻す
- Ctrl+/（Cmd+/）：選択行をコメントアウト
👉 初心者が最初にやるべきこと5選も参考にしてください。
まとめ
- ✅ VS Codeは無料で使えるコードエディタ。世界中のエンジニアが使っている
- ✅ 公式サイト（
code.visualstudio.com）からダウンロードできる - ✅ Windows・Mac どちらにも対応。Macはチップの種類に注意
- ✅ 日本語化は「Japanese Language Pack」拡張機能をインストールするだけ
- ✅
!+ Tab でHTMLの骨組みが自動入力される（Emmet）
VS Codeのセットアップが完了したら、いよいよプログラミング学習のスタートです。まずはHTMLから学んでみましょう！