もくじ

web制作初心者でも簡単!HTMLファイルをローカルで確認できるVS Codeのプラグイン『Live Server』

ハウツー
ウエのicon
ウエ

こんにちは、ウエさんです。
HTMLを勉強し始めの頃、作ったHTMLファイルをサーバー公開前にブラウザで確認するためにXAMPPを使っていたのですが、これよりももっと簡単にローカルでHTMLを確認できる方法があることを知りました!
Live Server
それがこのVisual Studio Code(以下VS Code)のプラグイン『Live Server』です!
今回はVS Codeのプラグインを使いますので、VS Codeを使ってない人はこちらからダウンロードしてください。
また今回はMacを使っていますが、Windowsでもほぼ同様なので、参考にしてください。

難しいインストール作業は皆無!プラグインをインストールするだけ

1.プラグインのインストール

プラグインのインストール
VS Codeを開くとサイドバーにプラグインアイコンありますので、そこをクリックします。
すると一番上に検索バーが出るので、そこに「Live Server」と入れると、目的のものが表示されますのでインストールボタンを押しましょう。

2.ブラウザで確認したいファイルを開く

ローカルブラウザで見たいHTMLファイルをフォルダーごと開きます。
VS Codeの「ファイル」→「開く」を選択します。
VS Codeでファイルを開く手順1
表示したいHTMLファイルの入ったフォルダを選択し「開く」ボタンをクリックするとフォルダーが開きます。
VS Codeでファイルを開く手順2
最初は何もエディターに表示されていないかもしれませんが、サイドにある一番上のアイコンをクリックすると、フォルダー内にあるファイルが表示されます。その中からLive Serverで確認したいファイルを選択すると、エディターにそのファイルが表示されます。
VS Codeでファイルを開く手順3

3.インストール後は『GO Live』が表示される

ブラウザの立ち上げ方
開いたファイルの一番下のバーに『GO Live』という文字が表示されているか確認してください。
この文字をクリックすると、Chromeが立ち上がり、今VS Codeで開いているファイルがローカルブラウザで見ることができたと思います!
※今回はChromeでしたが、使っているパソコンでデフォルト設定になっているブラウザが立ち上がります。Live Serverの時のみ違うブラウザを立ち上げたい場合は、また別で設定するが必要になります。

もし『GO Live』が表示されない時

HTMLファイルを開いているのに『GO Live』の文字が出現しない時は次のことを試して見てください。
VS Codeを一度終了させ、もう一度開き直してみてください。
HTMLファイルをそのまま開いていませんか?ちゃんとVS Codeの「開く」からHTMLファイルが入ったフォルダーを選択し開いてください。
ファイルの拡張子がHTMLになっているか確認してください。もし違う拡張子になっていたら、拡張子を.htmlに修正してください。
ファイルの拡張子
※拡張子とは、ファイル名の”.”以下の部分です。ここを確認し、.htmlになっているか確認してください。

Live Serverを使ってHTMLファイルを確認する

『GO Live』をクリックすると、自動でChromeが立ち上がり、ファイルに記した内容が表示されます。
このLive Serverの良いところは、ファイルの記述を修正し保存した段階で、自動でブラウザにも反映されることです。
いちいちブラウザをリロードする必要はありません!便利!!

終了する時は

Live Serverを終了するとき
終了する時は、VS Codeの一番下のバーで『GO Live』と表示されていた箇所が『Port:5500』になっていると思います。
この文字をクリックすると、終了します。

Live Serverで表示できるファイル

このLive Serverで表示できるファイルはHTMLの他ではJavaScriptファイルのみです。
JavaScriptを使ったサイトを作成する時でも使うことができますので、しばらくはこのプラグインで確認ができます!
※PHPファイルも設定させすれば見れるようになるようですが、まだ試したことはありません。いずれ試してみようと思います。
このプラグインであれば、Chromeの便利な拡張機能も利用可能なので、効率的に作業を進めていきましょう!
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。