HTML 入門
Webページ作成はじめの一歩
Visual Studio Code を使う
これまでは Web ページの作成に Windows の「メモ帳」アプリを利用しました．作業を効率的に行うためにはより高機能なテキストエディタを用いるべきでしょう．以降では IT 業界でデファクトスタンダートとなった Visual Studio Code を用いて作業を行います．まず，このページを参照して Visual Studio Code をインストールしてください．
フォルダを開く
Visual Studio Code のインストールができたら起動します．Visual Studio Code などのテキストエディタは「ファイルを開く」ではなく「フォルダを開く」という操作を行います（もちろん「ファイルを開く」ことも可能ですが）．下の画面のようにエクスプローラから「web」フォルダを Visual Studio Code 内にドラッグ＆ドロップしてフォルダを開きます．あるいは Visual Studio Code で「フォルダーを開く」ボタンやメニューを使っても構いません．
フォルダを開くことができたら Visual Studio Code のエクスプローラ（画面左側）に「WEB」フォルダの中身が表示されるので，この中に「index.html」というファイルがあることを確認できます．また「作成者を信頼しますか？」というメッセージが表示されますが，自身のファイルであれば「はい，作成者を信頼します」を選んで良いでしょう．
なお，Visual Studio Code のインストール時に「エクスプローラーのディレクトリコンテキストメニューに[Code で開く]アクションを追加する」設定をしておくと，「フォルダ」を右クリックして「Code で開く」というメニューを利用できるようになります．次の画面のように，右クリックしたあと「その他のオプションを確認」を開きます．
その中にある「Codeで開く」を選択します．これでフォルダを開くことができます．なお，右クリックしたあとのメニュー構造は Windows のバージョンによって異なる可能性があります．また，学内の情報処理実習室に設置された PC では「Visual Studio で開く」というメニューも表示されます．これは Visual Studio Code とは異なるソフトウェアなので，間違わないように注意してください．
Visual Studio Code の「エクスプローラ」で「index.html」をダブルクリックして開きます．（シングルクリックではプレビュー表示のみで，タブのファイル名がイタリックになることも確認してください．）
ブラウザで開く
ここで説明した方法で Windows のエクスプローラから index.html をブラウザで開いても良いですが，Visual Studio Code から開くことも可能です．Visual Studio Code のエクスプローラから index.html をブラウザにドラッグ＆ドロップします．
すると，ブラウザでファイルを開くことができました．環境によってはアドレスが「C:/Users/...」ではなく「C%3A/Users/...」のようになるかもしれませんが，とくに気にする必要はないでしょう．
ブラウザと Visual Studio Code を並べて表示して中身を確認します．
編集して上書き保存する
Visual Studio Code で本文に新たな行を追加します．このとき，上書き保存をするまではエディタのタブに「丸印」が表示されていることに注意してください．
Visual Studio Code で上書き保存をするとエディタのタブが「X印」に変化します．当然ながら，まだ Web ブラウザの表示は更新されません．ブラウザの表示を更新するには「再読み込みボタン」をクリックします．あるいはショートカットキー Ctrl + R （macOS では⌘ + R）を使っても構いません．
再読込するとブラウザの表示内容が更新されました．
Live Preview 拡張機能を利用する
Live Preview (Microsoft) 拡張機能は，次のページで利用する Live Server から着想を得て Microsoft が開発したものです．したがって，Live Server とよく似た機能が存在しています．
拡張機能のページで「Live Preview」で検索した結果から「Live Preview (Microsoft)」を選び，インストールを実行します．
拡張機能のインストールが終われば html ファイルを開きます．画面右上に表示されたアイコンをクリックします．
すると新しいタブが開き，プレビューが表示されました．エディタ画面に入力するだけで，上書き保存しなくともプレビュー表示が更新されることに注意してください．これによって作業効率が大幅に向上することでしょう．
また，Google Chrome や Edge など外部のブラウザでプレビューすることも可能です．ステータスバー（画面右下）の「ポート:3000」をクリックすると，コマンドパレット（画面上側）にメニューが表示されるので，「プレビューの表示（外部ブラウザー）」を選択します．
プレビュータブを開いている間は「プレビューの表示（ブラウザー）」が表示されないこともあります．その場合は，プレビュータブ（画面右側）を閉じてから，再び「ポート:3000」をクリックしてください．
プレビュータブを閉じた状態であるので「プレビューの表示（外部ブラウザー）」が表示されました．これをクリックします．
ブラウザが起動してプレビューが表示されました．エディタで文字を入力するたびに表示が更新されることに注意してください．
統合ブラウザを利用する
Visual Studio Code の統合ブラウザー (Integrated Browser) は，エディタ画面内で直接 Web ページを表示，操作できる機能です．これは Visual Studio Code ver.1.109（2026年2月）で追加された機能です．
Html ファイルをエディタで開くと画面右上に地球儀のような丸いアイコンが現れるので，このアイコンをクリックします．
エディタの中でプレビューが表示されました．ソースコードの編集とプレビューの確認を同時に行うために，右上のアイコンで画面を分割します．（さらに，左のプレビューを閉じます．）
左のエディタで HTML のソースを編集します．
編集後に上書き保存すると，右側のプレビューが更新されました．なお，ここを参考に自動保存の設定を行うとさらに作業効率が向上することでしょう．
