本文へスキップ
Web整備室
HTML / CSS 入門 Visual Studio Code Live Server ローカル開発

Live Server を使ってみよう

更新日：2026-08-02

前のページでは、VS Code に拡張機能を追加しました。

今回は、その中でも非常によく使われる、

Live Server

を使ってみます。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

Live Server とは？

Live Server は、

HTMLを保存すると、自動でブラウザ更新してくれる拡張機能

です。

通常は、

  1. HTMLを書く
  2. 保存
  3. ブラウザを更新（F5）

という流れでした。

しかし Live Server を使うと、

保存した瞬間に自動更新

されます。

Live Server をインストールする

VS Code の拡張機能画面を開き、

Live Server

と検索してください。

おすすめは、

  • Live Server
  • by Ritwick Dey

です。

「インストール」をクリックしてください。

index.html を開く

VS Code で、

index.html

を開いてください。

Live Server を起動する

VS Code の右下に、

Go Live

というボタンが表示されているはずです。

それをクリックしてください。

ブラウザが自動で開く

ブラウザが起動し、

http://127.0.0.1:5500/

のようなURLが表示されます。

これは、

Live Server がHTMLを表示するための簡易サーバー

です。

HTMLを書き換えてみよう

例えば、

<h1>こんにちは</h1>

を、

<h1>Live Serverの練習</h1>

へ変更して保存してください。

すると、

ブラウザが自動更新

されるはずです。

CSSも自動更新される

例えば、

color: red;

へ変更して保存すると、ブラウザ表示もすぐ変わります。

HTML/CSS 学習では非常に便利です。

なぜ便利なの？

Web制作では、

  • 少し変更
  • 表示確認
  • また変更

を何百回も繰り返します。

そのたびに F5 を押していると、意外と大変です。

Live Server を使うと、その作業を自動化できます。

localhost や 127.0.0.1 とは？

現在ブラウザには、

127.0.0.1

や、

localhost

が表示されているかもしれません。

これは、

自分自身のPC

を意味しています。

つまり、

自分のPCの中でWebサーバーを動かしている

状態です。

少しずつ「開発環境」に近づいている

最初は、

HTMLファイルを直接開く

だけでした。

しかし現在は、

  • VS Code
  • 拡張機能
  • Live Server
  • 自動リロード

など、実際の開発環境にかなり近づいています。

実は今後につながっている

現在は HTML/CSS の練習ですが、

  • Live Server
  • localhost
  • サーバー起動

などの考え方は、

  • PHP
  • Laravel
  • Docker
  • Node.js

などにもつながっていきます。

今はまだ完全に理解できなくても問題ありません。

少しずつ、

Webサイトはサーバーを通して表示される

という感覚をつかんでいきましょう。

次のページでは

次のページでは、

  • Chrome DevTools
  • 検証ツール
  • HTMLやCSSをリアルタイム確認する方法

を学んでいきます。

Web制作で非常に重要なツールです。