HTML 入門
Webページ作成はじめの一歩
Visual Studio Code の Live Server を使う
ここでは Visual Studio Code の拡張機能である Live Server をインストールして使ってみます．
まず，Visual Studio Code の左端にある「アクティビティバー」から「拡張機能」を選びます．検索ボックスに「live server」と入力すると検索結果が表示されます．この検索結果から「Live Server」を選択します．
下のような画面が表示されるので，内容を確認して「インストール」をクリックします．
インストールが完了すると次のような画面になります．
いまインストールした Live Server を使ってみましょう．「index.html」を開いて，コードが何も入力されていない部分を右クリックしてコンテキストメニューを表示します．その中にある「Open with Live Server」を実行します．
すると，規定の Web ブラウザが自動的に起動して index.html の内容が表示されます．このとき，ブラウザのアドレスが「127.0.0.1:5500/index.html」のようになっていることに注意してください．ここで「127.0.0.1」は自分自身の IP アドレスを意味します．その後の「:5500」はポート番号です．この番号は毎回異なる可能性があります．いずれにせよ，Live Server が簡易的な Web サーバとして機能していることになります．
Visual Studio Code で index.html を編集します．たとえば10行目のように文字列を追加します．なお，まだ保存してない状態です．
入力できたら上書き保存します．Live Server を起動している状態では，Visual Studio Code で上書き保存した直後に自動的にブラウザが再読込されて表示内容が更新されることに注意してください．この Live Server を使うと HTML 文書を保存するたびに自動的に表示内容が更新されるので，その都度ブラウザで再読み込み操作を行う必要がなく，効率的に作業を行うことができるようになります．さらに Visual Studio Code で自動保存のオプションを設定する方法もあります．一度試してみて，気に入ったら自動保存の設定で作業してください．
なお，起動した Live Server は画面右下にあるアイコンから停止（あるいは起動も）できます．
