本記事では、コードを書くための必要なエディタVisual Studio Code」 のダウンロードとインストール方法について解説します。

目次

Visual Studio Codeをダウンロードする

Visual Studio Code のダウンロードから行います。下記のURL へアクセスして下さい。

https://code.visualstudio.com/Download

ご自身のパソコンに合うタイプを選択いただきダウンロードいたします。次のような画面が表示されて Visual Studio Code のダウンロードが開始されます。任意の場所に保存しておいて下さい。ダウンロードは以上で終了です。

Visual Studio Codeをインストールする

続いてインストールを行います。ダウンロードしたファイルをダブルクリックするとインストーラーが起動してインストールが開始されます。最初に次のような画面が表示されます。

Visual Studio Codeをインストールする(1)

「使用許諾契約書」が表示されています。よく読んで頂き同意できる場合には「同意する」を選択し、そのあとで「次へ」をクリックしてください。

Visual Studio Codeをインストールする(2)

インストール先ディレクトリの選択画面です。デフォルトで設定されている場所でよろしければ「次へ」をクリックしてください。別の場所に変更する場合は「参照」をクリックしてインストール場所を選択したあとで「次へ」をクリックしてください。

Visual Studio Codeをインストールする(3)

Windows のスタートメニューに Visual Stddio Code のメニューを追加するかどうかの選択画面です。追加する場合は「次へ」をクリックしてください。追加する必要がない場合は「スタートメニューフォルダを作成しない」をクリックしてください。

Visual Studio Codeをインストールする(4)

追加の設定画面です。デフォルトで設定したい項目があればチェックを行ってください。今回は「PATHへの追加」のみチェックしました。設定が終わりましたら「次へ」をクリックしてください。

Visual Studio Codeをインストールする(5)

最終確認画面です。インストールしてよければ「インストール」をクリックしてください。

Visual Studio Codeをインストールする(6)

次の画面が表示されればインストールは完了です。

Visual Studio Codeをインストールする(7)

「完了」をクリックしてインストールを終了して下さい。

ファイル作成方法

まずは、デスクトップで「TEST」フォルダを作成し、VS codeにて「TEST」フォルダを開きましょう。

①下記画像を参考に「新規ファイル作成」アイコンをクリックします。

②新規ファイル名は「index.html」としEnterをクリックしファイルを作成します。

ローカルでの表示方法

①下記のようにファイルにコードを記載しファイルを保存した後に、作成したファイル名「index.html」(赤枠参考)の上にマウスを置き右クリックにて表示したメニューから「パスをコピー」をクリックしこのファイルのパスをコピーします。

<h1>こんにちは</h1>
HTML

②ブラウザを開き検索バーにコピーしたファイルパスをペーストします。

③下記のように「こんにちは」と画面の表示がされてれば問題なく表示ができております。

チェックテスト

チェックテストを確認する

VS codeがダウンロードできましたらトップ画面(下記参考)をスクリーンショットで撮影し、discordにて共有ください。

TOP