こんにちは！
Web制作やプログラミングを始めるときにとても便利なツール、「VSCode」の紹介です。
「HTMLやCSSをどこで書けばいいの？」「無料で使えるソフトってある？」
そんな初心者の方におすすめなのが、Visual Studio Code（通称：VSCode）です。
このページでは、VSCodeのインストール方法から、画面の見方、日本語化などの初期設定まで、だれでもわかるようにやさしく解説します！
もくじ
VSCodeってなに？
VSCodeは、正式には「Visual Studio Code（ビジュアル スタジオ コード）」といって、
プログラミングをするための無料のソフトです。
たとえば、Webページを作るときに使う「HTML」や「CSS」、「JavaScript」などのコードを、
パソコンのメモ帳に書くこともできますが、見にくかったり、間違いに気づきにくかったりします。
VSCodeを使うと、次のような便利なことができます：
● コードがカラフルに表示される！
文字がルールに合わせて色分けされるので、間違いやすい部分もすぐに気づけます。
例）タグは青、文字列は赤、など。
● 間違いが出ると教えてくれる！
タグを閉じ忘れたり、書き方にミスがあると、画面にマークが出て注意してくれます。
● いろんな言語に対応している！
HTMLやCSSだけじゃなく、JavaScript、Python、PHPなど、たくさんのプログラミング言語に対応しています。
● 使いやすい画面と自由なカスタマイズ
メモ帳のようにシンプルだけど、左にファイル一覧、右にコードを書く場所があって、直感的に使いやすいです。
さらに、テーマ（背景色や文字の色）も自由に変えられるので、自分の好きな見た目にできます。
● 世界中で使われている人気のツール！
VSCodeは、Microsoft（マイクロソフト）が作ったソフトで、
プロのエンジニアやデザイナーも使っているくらい、信頼されているツールです。
初心者でもすぐに使えるのに、プロにも通用する。
だからこそ、「プログラミングを始めたい！」という人にまずおすすめしたいソフトなんです。
「まだコードなんてよくわからない…」という人も、VSCodeを開いて少しずつ触ってみれば、
「こんなふうにページが作られてるんだ！」と楽しく学んでいけるはずです！
次は、そんなVSCodeをパソコンにインストールする方法を説明します！
VSCodeをインストールしよう（ダウンロード手順）
VSCode（Visual Studio Code）は、誰でも無料で使えるソフトです。
ここでは、Windowsのパソコンを使っている人向けに、インストールの手順をやさしく解説していきます。
ステップ① 公式サイトを開く
まずは、VSCodeの公式サイトにアクセスしましょう。下のリンクをクリックします：
すると、以下のようなページが表示されます。
- 画面の中央に「Download for Windows」などのボタンが出てくるので、
自分が使っているパソコンの種類にあわせてクリックしてください。
✅ Windowsなら →「Windows」
✅ Macなら →「macOS」
✅ Linuxなら →「Linux」
ステップ② ファイルをダウンロードする
「Windows」をクリックすると、VSCodeのインストーラーというファイル（たとえば VSCodeUserSetup-x64-1.XX.X.exe）が自動でダウンロードされます。
- 画面の左下や、ダウンロードフォルダにそのファイルが出てきたら、ダブルクリックして開きます。
ステップ③ インストールを始める
ファイルを開くと、インストールの画面が表示されます。以下のような流れで進めていきましょう：
- 「同意する」にチェックを入れて「次へ」をクリック
- 保存先は特に変更せず「次へ」をクリック
- 「スタートメニューに登録」もそのままでOK、「次へ」
- 「デスクトップにアイコンを作成する」など、好きな設定にチェック（チェックしておくと便利です）
- 「インストール」ボタンをクリック！
インストールが完了するまで、1〜2分ほど待ちます。
ステップ④ VSCodeを起動する
最後に「完了」ボタンが表示されたら、「Visual Studio Codeを起動」にチェックが入っていることを確認して、完了ボタンをクリック。
これで、VSCodeの画面が表示されます！
初回は英語表記になっているかもしれませんが、次のステップで日本語に切り替える方法を紹介します。
【ここでちょっと安心ポイント】
英語が出てきても、この記事の手順通りに進めればOK！
難しそうに見えますが、基本的に「次へ」「同意する」「インストール」と進めていくだけです。
初めての起動と画面の見方
VSCode（Visual Studio Code）をインストールしたら、いよいよ起動してみましょう！
アイコンは、青いマークで、「Visual Studio Code」と表示されています。
VSCodeを起動するには？
- デスクトップにある VSCodeのアイコンをダブルクリック
- または、Windowsの「スタートメニュー」から「Visual Studio Code」を検索してクリック
すると、VSCodeのメイン画面が表示されます。
画面の基本構成を見てみよう
VSCodeの画面は、以下のように大きく5つのエリアに分かれています。
① 左側のバー（アクティビティバー）
画面の一番左にある縦のバーで、よく使う機能が並んでいます。
アイコンの意味を簡単に紹介します：
| アイコン | 意味・機能 |
|---|---|
| 📁 ファイル（エクスプローラー） | プロジェクトやフォルダを開くところ |
| 🔍 検索 | ファイルの中の文字やコードを検索 |
| ⬆ Git（ソース管理） | バージョン管理（初心者は気にしなくてOK） |
| ▶️ 拡張機能 | VSCodeに便利な機能を追加できる場所 |
| 🐞 実行とデバッグ | エラーを見つけて直すための機能（中級向け） |
一番よく使うのは、「📁ファイル」と「▶️拡張機能」です。
② 左側のサイドバー（エクスプローラー）
ここには、開いているフォルダやファイルの一覧が表示されます。
ホームページのファイル（HTML、CSSなど）を管理するのに便利です。
③ 真ん中の大きなエリア（エディタ）
ここがコードを書くためのメインスペースです。
たとえば、index.htmlというファイルを開くと、ここにその中身（HTMLのコード）が表示されて、編集できます。
複数のファイルを開くと、タブ形式で上に並びます。ノートを何冊も開いてるようなイメージです。
④ 右下・下部のバー（ステータスバー）
画面の一番下にあるバーです。
ここには現在の情報がいろいろ表示されます。
- 今開いているファイルの種類（例：HTML、CSSなど）
- エラーがあるかどうか
- 文字コードや改行の形式
「HTMLファイルを開いたつもりなのに、うまく色がつかない…」というときは、
このバーを見て、ファイルの種類が正しく設定されているかをチェックしてみましょう。
⑤ 右上の×や…（メニュー）
ファイルを閉じたり、設定を開いたりするのに使います。
×：ファイルを閉じる…：表示方法の変更などができるメニュー
最初に触るならこれ！
起動したら、まず次のことをやってみましょう：
- 左の📁アイコンをクリックして「フォルダーを開く」→ デスクトップなどのフォルダを選んで開いてみましょう
- エクスプローラーにファイルが表示されます。クリックすると、中央のエディタに中身が表示されます
- 試しに新しいファイルを作るには、「ファイル → 新しいファイル」または「右クリック → 新しいファイルを作成」
ポイント：まずは「使って慣れる」ことが大切
最初は見慣れない画面で戸惑うかもしれませんが、
何度か触っているうちに自然と覚えられるので安心してください！
このあとのステップでは、日本語への切り替え方法や、便利な初期設定を紹介します。
日本語化と初期設定のやり方
① 日本語パックをインストールする
- 左のバーにある「四角いアイコン（拡張機能）」をクリック
- 検索バーに「Japanese」と入力
- 「Japanese Language Pack for Visual Studio Code」が表示されたら「インストール」ボタンを押す
- インストール後、「再起動しますか？」と聞かれたら「OK」
これで画面が日本語になります！
② おすすめの初期設定（初心者向け）
- テーマの変更（見やすい色に変える）
画面左下の歯車 →「テーマの選択」→ 好きな色を選んでOK！ - ファイルの自動保存
歯車 →「設定」→「自動保存」と検索 →「オン」にチェックを入れる
→ 書いた内容が自動で保存されるようになります！
VSCodeでできること（基本機能一覧）
VSCodeはとても多機能ですが、最初はこれだけ覚えておけばOK！
| 機能 | 内容 |
|---|---|
| コードを書く | HTML、CSS、JSなど自由に書ける |
| 色分け表示（シンタックスハイライト） | タグや命令が色分けされて見やすい |
| 拡張機能の追加 | 自分好みに便利機能を追加できる |
| タブで複数ファイルを開ける | ページを切り替えながら作業できる |
| プレビュー表示 | 実際にどんなページになるか確認できる（Live Server拡張など使用） |
まとめ
VSCodeは、初心者でも使いやすく、無料で高機能なコードエディタです。
- インストールは数クリックで簡単
- 日本語化もすぐできる
- 見た目もカスタマイズできて、作業が楽しくなる！
これからHTMLやCSSを学んでいきたい人には、ぴったりのスタートツールです。
次回は、VSCodeでHTMLファイルを作って表示する方法を紹介しますので、お楽しみに！
教材もたくさんありますので気になる方はチェック！
