Windows版「Visual Studio Code（以下VSCode）」を使っていこう
「VSCode」のインストール方法から、拡張機能「Live Server」の便利な使い方をご紹介します。
「VSCode」のインストール手順
１．公式サイトにアクセスし、右上の「Download」ボタンを押下
https://code.visualstudio.com/より遷移できます。
２．インストーラーをダウンロードし、ダブルクリック
エクスプローラーの「ダウンロード」フォルダを確認しましょう。
ダブルクリックでインストーラーのセットアップ画面が立ち上がります。
３．使用許諾契約書に同意して「次へ」を押下します
「同意する」にチェックを入れてください。
同意しないと利用できません。
４．「次へ」を押下してください
お好みで「デスクトップ上にアイコンを作成する」にチェックを入れると後で便利でしょう。
５．準備完了の画面にて「インストール」を押下
押下するとインストールが実行されます。
６．セットアップが終了しますので「完了」を押下します
無事にインストールが終了するとこの画面に遷移します。
７．VSCodeが起動します
あなたのコーディングライフが始まりますね！
続いてWeb制作に使える便利な拡張機能「Live Server」をインストールしましょう。
拡張機能「Live Server」のインストール方法と使い方
８．左端アクティビティバーより「拡張機能」アイコンを押下してください
するとサイドバーに「拡張機能」タブが表示されます。
９．拡張機能検索バーにて「Live Server」を入力してください
検索結果が表示されます。
目当ての拡張機能「Live Server」のインストールボタンを押下してください。
１０．「Live Server」の使い方
VSCode上の「エクスプローラー」でHTMLやCSSを含んだプロジェクトフォルダを開いている状態で使用します。
VSCodeウィンドウ右下に「Go Live」という文字がございます。
HTMLファイルを表示させた状態でこの部分を押下します。
（ネットワーク上の注意を表すポップアップ画面が表示されたら「許可する」を押下してください）
すると右下文字部分が「Port:（任意の数字）」に変化。サーバー機能が起動します。
規定のブラウザが立ち上がり、作成中のプロジェクトデータをまるでWeb上にあるかのように閲覧できます。
「Live Server」起動中、HTMLやCSSに変更を加えて保存すると、変更箇所がすぐにブラウザ上で確認できます。
「Live Server」をいったん停止したい場合は、「Port:（任意の数字）」部分を再度押下するとサーバー機能が停止します。