はじめに

未来電子テクノロジーでインターンをしているにのみやです。

この記事では、一からwebページを作ってみる際に、「絵を描くように、ファイルを編集しながらプレビューしたい」と思って調べてみたことをまとめてみました。
プログラミングを始めて二週間ほどなので、間違いも多いと思います。
間違いがあれば、ぜひ教えてください。

STEP1 Live Serverをインストールする

Live Serverにアクセスしてインストールします。

１．VSCode左上、ファイル内の自動保存を有効にします。

２．右下の矢印の部分を「Go Live」にする

３．プレビューしたいHTMLファイル上で右クリックし、「Open in browser」をクリックします。

するとブラウザが開き、プレビューできるようになるので、画面分割モードなどにすることで編集しながらリアルタイムでプレビューできます。
※画像ではわかりにくいですが、HTML/CSSファイルを編集して一秒くらいするとブラウザで変更が反映されます。

ざっと説明しましたが、「わかりにくい！」や「間違えている！」などのご意見がありましたらぜひ教えてください。