19
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VSCodeでHTML/CSSファイルを編集しながらリアルタイムでプレビューする方法

Posted at

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

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

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

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

#STEP2 セッティングする

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

2019-06-07 (2)_LI.jpg

2.右下の矢印の部分を「Go Live」にする
2019-06-07 (1)_LI.jpg

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

2019-06-07 (3)_LI.jpg

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

2019-06-07 (4)_LI.jpg

#おわりに

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

19
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?