Mac版「Visual Studio Code（以下VSCode）」を使っていこう
「VSCode」のインストール方法から、拡張機能「Live Server」の便利な使い方をご紹介します。
「VSCode」のインストール手順
１．公式サイトにアクセスし、右上の「Download」ボタンを押下
https://code.visualstudio.com/より遷移できます。
２．Mac版のインストーラーを押下
「macOS 10.15+」のものを選んでください。
３．ダウンロードが実行されます
「Finder」のダウンロードフォルダを開いて、.zipファイルを見つけてください。
４．ダウンロードフォルダ内の.zipファイルをダブルクリック
ダブルクリックでアーカイブユーティリティが起動し、ファイルが解凍されます。
５．ダウンロードフォルダ内に「VSCode」プリケーションアイコンが現れます
ファイルが解凍されました。
６．お好きな場所にドラッグアンドドロップすると使いやすいでしょう
今回はデスクトップ上に移動させてみました。画面下部「Dock」にもD&Dできます。
７．「開く」ボタンを押下してください
">
初回起動時にはポップアップ画面が出現します。
８．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:（任意の数字）」部分を再度押下するとサーバー機能が停止します。