6日でできる 新HTML&CSS入門｜Visual Studio Codeのインストール

6日でできる 新HTML&CSS入門｜Visual Studio Codeのインストール

使いやすいコードエディターを準備して、Web制作を始めるための第一歩を踏み出そう。

HTMLやCSSを使ってWebページを作るときは、コードを入力して保存するためのエディターが必要です。

Windowsに標準で用意されているメモ帳でもHTMLを書くことはできますが、コードがすべて同じような文字で表示されるため、タグの範囲や入力ミスを見つけにくいことがあります。複数のHTMLファイルや画像を扱うようになると、ファイル管理にも手間がかかります。

そこで、Web制作の学習環境として利用しやすいのがVisual Studio Codeです。一般にはVS Codeという略称で呼ばれています。

VS Codeでは、HTMLのタグを色分けして表示したり、入力途中のタグや属性を候補として表示したりできます。作業フォルダー内のファイルを一覧で管理できるため、HTML、画像、CSSなどを組み合わせるWeb制作にも向いています。

VS Codeは統合開発環境として紹介されることもありますが、Microsoftの公式サイトでは、軽量で拡張可能なコードエディターとして案内されています。必要な機能を拡張機能によって追加することで、さまざまな言語に対応した開発環境へ発展させられるのが特徴です。(Visual Studio Code)

ここでは、VS Codeの特徴、Windowsへのインストール手順、macOSとLinuxでの導入方法、初回起動後に確認しておきたい設定までを順番に解説します。

Visual Studio Codeとは

Visual Studio Codeは、Microsoftが提供しているコードエディターです。

Windowsだけでなく、macOSやLinuxでも利用できるため、学習する場所や使用するパソコンが変わっても、同じような操作環境を用意できます。公式ダウンロードページでは、Windows向けのインストーラー、macOS向けのディスクイメージ、Linux向けのdebパッケージやrpmパッケージなどが提供されています。(Visual Studio Code)

VS CodeはHTMLやCSSだけに限定されたエディターではありません。

JavaScript、JSON、Markdownなどの編集にも利用できます。さらに、拡張機能を追加することで、Python、Java、C#など、さまざまなプログラミング言語の入力支援や実行、デバッグにも対応できます。

Visual StudioとVisual Studio Codeの違い

Visual Studio CodeとVisual Studioは名前がよく似ていますが、別の製品です。

Visual Studioは、主にWindows向けのアプリケーション開発などで使われる大規模な統合開発環境です。コンパイラ、デバッガー、画面設計、テストなどの機能を一つの環境にまとめています。

一方、VS Codeは比較的軽量なコードエディターです。最初からすべての開発機能を搭載するのではなく、利用する言語や目的に応じて拡張機能を追加します。Microsoftも、Visual Studioを統合開発環境、VS Codeを軽量なクロスプラットフォームのコードエディターとして区別しています。

HTMLの基本を学び始める段階では、VS Codeを使うことで、必要な機能を分かりやすい画面にまとめられます。

VS CodeがWeb制作に向いている理由

VS Codeには、コードを読みやすくし、入力作業を助ける機能があります。

HTMLについては、基本的な編集機能が最初から組み込まれています。タグの色分け、IntelliSenseによる入力候補、整形、Emmetによる入力展開などを、追加のHTML拡張機能なしでも利用できます。

IntelliSenseは、単純に過去の入力履歴を表示するだけではありません。使用している言語に応じて、要素、属性、メソッド、変数、キーワード、スニペットなどの候補を表示します。(Visual Studio Code)

HTMLを入力するときに候補が表示されても、候補の意味を理解せずに選ぶだけでは、HTMLの仕組みは身につきません。入力支援は学習を補助する機能として使い、タグや属性の役割も一つずつ確認していきましょう。

統合ターミナルで編集とコマンド操作をまとめられる

VS Codeには統合ターミナルが用意されています。

統合ターミナルを開くと、VS Codeの画面を離れずにPowerShell、コマンドプロンプト、Git Bash、WSLなどを操作できます。通常のターミナルと同じように、フォルダーの作成やGitの操作なども行えます。(Visual Studio Code)

HTMLの学習を始めたばかりの段階では、ターミナルをすぐに使いこなす必要はありません。

学習が進むと、次のような作業で役立ちます。

図1：VS Codeで行えるWeb制作の作業

この図から分かること

VS Codeでは、HTMLを入力するだけでなく、Webサイトに含まれる複数のファイルを一つの画面で管理できます。

画面中央のエディターではコードを編集し、左側のエクスプローラーではHTMLや画像が保存されている場所を確認します。画面下部の統合ターミナルでは、必要に応じてコマンドを実行できます。

コードの色分けや入力候補も表示されるため、HTMLの構造を確認しながら作業を進められます。

インストール前に確認すること

VS Codeをダウンロードする前に、使用しているOSとCPUの種類を確認します。

現在の公式ダウンロードページでは、Windows 10とWindows 11向けにx64版とArm64版が用意されています。macOSではIntel、Apple silicon、Universalの各ビルドが提供され、Linuxではdeb、rpm、tar.gz、Snapなどを選択できます。

IntelやAMDのCPUを搭載した一般的なWindowsパソコンでは、x64版を選びます。

Arm版Windowsを搭載したパソコンではArm64版を選びます。CPUの種類が分からない場合は、Windowsの設定にあるシステム情報でシステムの種類を確認してからダウンロードすると安心です。

公式サイトからダウンロードする

インストーラーは、VS Codeの公式ダウンロードページから入手します。

検索結果には、第三者が運営するソフトウェア配布サイトが表示されることもあります。安全性と更新の確実性を考え、提供元がMicrosoftである公式サイトからダウンロードしましょう。

ダウンロードページでは、OSに合った代表的なインストーラーが大きく表示されます。さらに詳しい選択肢として、WindowsではUser Installer、System Installer、ZIP形式などが用意されています。

Windowsで選べるインストール方法

Windows向けには、主に次の方法があります。

Microsoftは、一般的な個人利用ではUser Installerを推奨しています。管理者権限を必要とせず、現在のWindowsユーザー用としてインストールされ、更新も行いやすいためです。

学校や会社の共用パソコンなどで、複数のユーザーが同じVS Codeを使う場合は、管理者の方針に従ってSystem Installerを選ぶことがあります。

ZIP版はインストール操作をせずに展開して実行できますが、新しい版が公開されたときは手動で更新する必要があります。初めて学習環境を作る場合は、通常のUser Installerが分かりやすいでしょう。

Windows版インストーラーをダウンロードする

公式ダウンロードページを開き、WindowsのUser Installerを選択します。

公式Webサイト：https://code.visualstudio.com/

一般的なWindowsパソコンではx64を選びます。ダウンロードが完了すると、次のような名前のファイルが保存されます。

VSCodeUserSetup-x64-{version}.exe

{version}の部分には、ダウンロードしたVS Codeのバージョン番号が入ります。バージョン番号は更新されるため、教材の画面と実際のファイル名が完全に一致しなくても問題ありません。

通常、ファイルはWindowsのダウンロードフォルダーに保存されます。

インストーラーを起動する

ダウンロードしたexeファイルをダブルクリックします。

Windowsから、このアプリを実行してよいか確認する画面が表示された場合は、発行元がMicrosoft Corporationであることを確認してから進みます。

セットアップウィザードの表示内容はバージョンによって少し変わることがありますが、基本的な流れは同じです。

使用許諾契約書を確認する

最初に使用許諾契約書が表示された場合は、内容を確認します。

同意してインストールを続ける場合は、同意する項目を選択して次へ進みます。

内容を確認せずにボタンを連続して押すのではなく、何をインストールしようとしているのかを画面ごとに確認する習慣を付けましょう。

インストール先を確認する

User Installerでは、通常、現在のユーザーのフォルダー内へVS Codeがインストールされます。

公式ドキュメントでは、既定の保存先は次の場所です。

C:\Users\ユーザー名\AppData\Local\Programs\Microsoft VS Code

特別な管理上の理由がなければ、既定の場所から変更せずに進めて問題ありません。

保存先を自由に変更すると、後からVS Codeの場所が分からなくなることがあります。学習用のパソコンでは、基本的に標準設定を利用すると管理しやすくなります。

スタートメニューへの登録を確認する

次に、スタートメニューへ登録するフォルダー名を確認します。

通常はVisual Studio Codeのままで進みます。

スタートメニューへ登録しておくと、WindowsのスタートボタンからVS Codeを検索して起動できます。

追加タスクを設定する

セットアップウィザードでは、デスクトップアイコンや右クリックメニューなどの追加項目が表示されることがあります。

画面の構成はバージョンによって異なりますが、次のような項目があれば、用途に合わせて選択します。

現在のWindows向けセットアップではVS CodeがPATHへ追加され、インストール後にターミナルを再起動すると、フォルダー内でcode .を実行して、そのフォルダーをVS Codeで開けます。

デスクトップアイコンは好みで選んで構いません。右クリックメニューとPATHは、今後のWeb制作やコマンド操作で役立ちます。

インストールを開始する

設定内容の確認画面が表示されたら、インストールを選択します。

ファイルのコピーや設定が自動的に行われるため、処理が完了するまでセットアップウィザードを閉じないようにします。

セキュリティソフトやWindowsの設定によって、途中で確認画面が表示される場合があります。表示内容と発行元を確認してから進めましょう。

セットアップを完了する

インストールが完了すると、セットアップウィザードの完了画面が表示されます。

Visual Studio Codeを実行する項目が選択されている場合は、そのまま完了を選択するとVS Codeが起動します。

後から起動する場合は、次のいずれかを利用できます。

図2：WindowsへVS Codeをインストールする流れ

この図から分かること

Windowsでは、公式サイトからUser Installerをダウンロードし、セットアップウィザードの案内に沿って進めます。

基本的には既定の設定を利用して問題ありませんが、追加タスクの画面では、PATHや右クリックメニューに関する項目を確認しておくと、インストール後の操作が便利になります。

ファイル名や画面の細かな配置は、VS Codeのバージョンによって変わることがあります。教材の画面と完全に同じでなくても、表示されている説明を確認しながら進めればインストールできます。

インストール後に起動できるか確認する

VS Codeが起動すると、スタート画面やウェルカム画面が表示されます。

最初に、次の点を確認します。

VS Codeを起動できない場合は、インストールが完了しているか、対応しているWindowsを使用しているか、セキュリティソフトによって起動が止められていないかを確認します。

codeコマンドを確認する

PATHへの登録を確認するには、PowerShellやコマンドプロンプトをいったん閉じて開き直します。

次のコマンドを実行します。

code --version

VS Codeのバージョン情報が表示されれば、codeコマンドを使用できます。

現在のフォルダーをVS Codeで開く場合は、次のように実行します。

code .

ピリオドは現在のフォルダーを意味します。

コマンドが見つからないというエラーが表示された場合は、ターミナルを再起動します。それでも解決しない場合は、PATHへの登録を確認するか、VS Codeを再インストールします。

macOSへインストールする

macOS版は、公式サイトからdmgファイルをダウンロードしてインストールします。

現在の公式手順は、ダウンロードしたdmgファイルを開き、Visual Studio Code.appをApplicationsフォルダーへドラッグし、Applicationsフォルダーから起動する流れです。Intel搭載Mac、Apple silicon搭載Mac、両方に対応するUniversal版が提供されています。

ターミナルからcodeコマンドを使う場合は、VS Codeのコマンドパレットを開き、Shell Command: Install 'code' command in PATHを実行します。その後、ターミナルを再起動するとcode .などを利用できます。

Linuxへインストールする

Linuxでは、使用しているディストリビューションに合ったパッケージを選びます。

UbuntuやDebian系ではdeb、FedoraやRHEL、AlmaLinuxなどではrpmを使用できます。公式のSnapパッケージも提供されています。

UbuntuやDebian系でダウンロード済みのdebパッケージをインストールする場合は、パッケージがあるフォルダーで次の形式のコマンドを実行します。

sudo apt install ./ファイル名.deb

FedoraやRHEL系でダウンロード済みのrpmパッケージをインストールする場合は、次の形式で実行します。

sudo dnf install ファイル名.rpm

Snapを利用する場合は、次のコマンドでインストールできます。

sudo snap install --classic code

Linuxでは、パッケージと一緒に公式リポジトリを登録すると、OSのパッケージ管理機能から更新できるようになります。具体的なリポジトリ設定は変更される可能性があるため、実際にインストールするときは公式のLinux向け手順を確認しましょう。

VS Codeの画面構成を確認する

インストール後は、最初に主要な画面の名前を確認します。

すべてのボタンを最初から覚える必要はありません。

HTML学習の初期段階では、エクスプローラー、エディター、ステータスバーの位置が分かれば、ファイルの作成と保存を始められます。

作業用フォルダーを開く

VS Codeでは、HTMLファイルを1枚ずつ開くより、Webサイト用のフォルダー全体を開いて作業する方法が便利です。

たとえば、ドキュメント内にhtml-studyというフォルダーを作り、そのフォルダーをVS Codeで開きます。

フォルダーを開くと、左側のエクスプローラーに保存されているファイルが一覧表示されます。

信頼できない場所から入手したフォルダーを開くときは、VS CodeのWorkspace Trustに関する確認が表示される場合があります。自分で作成した学習用フォルダーであることを確認してから、信頼する操作を行います。

HTMLの編集には基本機能をそのまま使える

VS CodeにはHTMLの基本的な編集支援が組み込まれています。

HTMLファイルを開くと、タグや属性が色分けされ、入力中には候補が表示されます。開始タグを入力したときの終了タグ支援や、Emmetによる省略入力も利用できます。

そのため、HTMLの学習を始めるためだけに、大量の拡張機能をインストールする必要はありません。

最初はVS Codeの標準機能でHTMLを入力し、不足を感じた機能だけを後から追加する方法がおすすめです。

拡張機能を追加する方法

拡張機能は、アクティビティバーの拡張機能アイコンから検索できます。

WindowsとLinuxではCtrl+Shift+X、macOSではShift+Command+Xでも拡張機能ビューを開けます。検索欄へ目的の名前を入力し、詳細を確認してInstallを選択するとインストールされます。

拡張機能を選ぶときは、名前だけで判断しないようにします。

拡張機能はVS Code本体と同等の権限で動作します。第三者の提供元から初めて拡張機能をインストールするときは、提供元を信頼するか確認する画面が表示されます。提供元や拡張機能IDを確認し、必要性が分からないものをむやみに追加しないことが大切です。

Pythonを使う場合は別途準備が必要

VS CodeでPythonを学習する場合は、Microsoftが提供するPython拡張機能を追加します。

ただし、Python拡張機能をインストールしただけでは、Python本体は実行できません。Pythonインタープリターを別途インストールし、VS Codeで使用するインタープリターを選択する必要があります。

Python拡張機能を追加すると、コード補完、IntelliSense、デバッグ、テスト、仮想環境の切り替えなどを利用できます。

今回の学習目的がHTML制作であれば、Python拡張機能はすぐに追加しなくても構いません。利用する言語が決まってから必要な拡張機能を追加しましょう。

日本語表示とテーマを調整する

インストールした環境によっては、VS Codeのメニューが英語で表示されることがあります。

日本語の画面で操作したい場合は、拡張機能ビューからMicrosoftが提供する日本語言語パックを検索して追加します。インストール後に表示言語を変更し、VS Codeを再起動すると日本語表示へ切り替えられます。

画面の配色は、コマンドパレットや設定画面から変更できます。

設定は、最初から細かく変更しすぎないほうがよいでしょう。

まずは標準設定で操作し、文字が小さい、行が見づらい、保存を忘れやすいといった問題を感じたときに、必要な項目だけを調整します。

図3：インストール後に確認する初期設定

この図から分かること

VS Codeをインストールした後は、すぐに多くの拡張機能を追加するのではなく、最初に作業用フォルダーを開き、HTMLファイルを作成できることを確認します。

HTMLの基本的な入力支援は標準で利用できるため、まずはそのまま学習を始められます。

画面の言語、テーマ、文字サイズ、自動保存などは、作業しやすさに応じて調整します。Pythonなど別の言語を扱うときは、その段階で必要な拡張機能と実行環境を追加します。

HTMLファイルを作成して動作を確認する

インストールと初期確認が終わったら、簡単なHTMLファイルを作成して、正常に保存できるか確認します。

作業用フォルダーを開き、エクスプローラーから新しいファイルを作成します。ファイル名は、たとえばindex.htmlとします。

.htmlという拡張子を付けると、VS CodeはHTMLファイルとして認識します。画面右下の言語モードにもHTMLと表示され、タグの色分けや入力候補が有効になります。

この段階では、次の点を確認します。

ファイルを作成できても、保存していなければブラウザには最新の内容が反映されません。

編集タブに未保存を示す印が表示されていないか確認し、保存してからブラウザで開きます。

インストールで問題が起きたときの確認方法

VS Codeをインストールできない場合は、表示されたエラーメッセージを確認し、どの段階で止まったのかを整理します。

会社や学校のパソコンでは、利用者によるソフトウェアのインストールや拡張機能の追加が制限されていることがあります。その場合は、設定を無理に変更せず、管理者へ確認します。

VS Codeを安全に使い続ける

VS Codeには更新機能があり、新しい版が公開されると更新通知が表示されます。WindowsとmacOSでは自動更新を利用でき、Linuxでは導入方法によってパッケージ管理システムやSnapによって更新されます。

更新には、新機能だけでなく、不具合やセキュリティ上の問題への修正が含まれることがあります。

学習用の環境では、特別な理由がなければ安定版を使用し、更新通知が表示されたときに内容を確認して更新します。

拡張機能も定期的に更新されます。利用しなくなった拡張機能は無効化または削除し、必要なものだけを管理すると、動作や設定を把握しやすくなります。

Web制作を始める準備を整える

VS Codeのインストールが完了したら、Web制作に必要な最低限の準備が整ったことになります。

HTMLの学習では、次の流れを繰り返しながらコードの書き方を身につけていきます。

1. Webサイト用の作業フォルダーを開く
2. HTMLファイルを作成する
3. VS CodeでHTMLを入力する
4. ファイルをUTF-8で保存する
5. ブラウザでHTMLを開く
6. 表示結果を確認する
7. VS Codeへ戻って修正する
8. 保存してブラウザを再読み込みする

VS Codeは、HTMLを自動的に完成させるためのソフトウェアではありません。

コードを読みやすく表示し、入力やファイル管理を支援する道具です。入力候補や拡張機能を上手に利用しながら、HTMLのタグ、属性、文書構造の意味を一つずつ理解していくことが大切です。

画面キャプチャを挿入する教材向けに、各インストール手順をさらに細かく分割することもできます。