HTML/CSSをブラウザで自動更新!VSCodeエディタが超便利

- プログラミング -
2019.12.18
HTML/CSSの更新を自動反映

HTML, CSS, JavaScriptのコードを書きながら学習していると「コードを書き換えるたびにブラウザを手動でリロードするの面倒だなぁ」と思うことがありませんか?

「コード書き換え→保存したら即ブラウザで自動更新されたら楽なのに・・・」

そんな悩みは、Visual Studio Code(VS Code)というエディタを使えば簡単に実現可能なので、その方法を解説します。

この機能を一度使うともう他のエディタにはきっと戻れなくなるでしょう。

Bracketsというエディタでも似たような機能を使えますが、Bracketsよりも設定が簡単なのでプログラミング初学者の方はVSCodeに乗り換えてみることをおすすめ。

VSCodeでHTML/CSS/JavaScriptをブラウザ自動更新させる方法

VSCodeをインストールしている前提で話を進めます。まだインストールしていない方は以下よりどうぞ。

VSCode公式サイト≫

VSCodeのプラグイン「Live Server」をインストール

VSCodeを開いて、以下操作でLive Serverをインストールします。

  1. 左下の赤枠マークをクリック
  2. [Live Server]で検索
  3. Live Serverをインストール・有効化する

HTML/CSSの更新を自動反映

インストールが正常に完了し、Live Serverが有効化されていれば、以下のようにエディタの右下に「Go Live」というアイコンが表示されます。

HTML/CSSの更新を自動反映

このLive Serverは、インストールするだけでOKです。特にその他の設定をいじる必要はありません。

更新したいファイルをエディタで開き、Live Serverを起動

HTMLファイル(PHPファイルも可)を開いている状態で「Go Live」をクリックします。

HTML/CSSの更新を自動反映

すると、自動的にブラウザが起動し、開いていたHTMLファイルが表示されます。

HTML/CSSの更新を自動反映

この状態まで動作を確認できれば完了です。

あとは、HTMLの内容や読み込んでいるCSS、JavaScriptを更新して保存してみてください。手動でブラウザの再読み込みをしなくても、保存した瞬間に更新した内容が反映されています。

注意点

「Go Live」をクリックする時は、HTMLファイル(.html)かPHPファイル(.php)がエディタ上でアクティブになっている(カーソルが当たっている)状態であることを確認してください。

CSSやJavaScriptなど、HTMLファイルから呼び出されるファイルがアクティブ状態でGo Liveをクリックすると、意図しないファイルがブラウザで開いてしまいます。

たとえば、以下のようにJavaScriptファイルがアクティブになっている状態で「Go Live」をクリックしないように。

HTML/CSSの更新を自動反映

特に、エディタ上で複数のファイルが開かれている時は間違えやすいので気をつけてみてください。

XAMPP/MAMPなどWebサーバソフトが不要!

HTML, CSS, JavaScriptなど静的なWebサイトをブラウザ表示するだけならLive ServerがあればXAMMP/MAMPなどを使ってWebサーバを起動する必要がありません

プラグインのLive Serverがその名の通りWebサーバとして機能してくれているからです。

VSCodeを開いて「Go live」をクリックするだけでコードを書き始められてすごい楽なので、学習時には重宝するはずです!

【コスパ最強】プログラミング学習はUdemyがおススメ【本は不要】