Visual Studio CodeでHTMLプレビューを表示させる方法について説明しています。CSSファイルを反映させる方法も。
プレビューを表示させたい
Visual Studio CodeでHTMLファイルを作成している場合、途中で出来上がりを確認する人がほとんどだと思うが困ったことに初期状態ではプレビューを表示させる機能がない。ブログ主が以前エディターとして使っていたAtomでは標準であったので最初つまづいた（※Atomは開発終了が決定しています）。
初期状態ではプレビューできないものの拡張機能を追加してHTMLプレビューの表示をすることができる。HTMLプレビューができる拡張機能はいくつかあるがここではMicrosoft公認でCSSも反映できる「Live Preview」という拡張機能を紹介。
※開発途中の機能という事で今後見た目や内容が変わる可能性があります
Live Previewのインストール
Visual Studio Codeを起動したら左のメニューから拡張機能の部分をクリックする。
検索枠に「Live Preview」と入力し、Live Previewのインストールボタンをクリックする。※Live Serverと間違えないように。
しばらく待つとインストールされる。
HTMLプレビューを表示させる
エディターでHTMLファイルを開いて、下の画像の□の部分（エディター上では画面右上にある）をクリックする。
すると画面が二分割され、右側にHTMLのプレビュー画面が表示される。Live Previewでは名前の通りリアルタイムでHTMLプレビューが更新される。
CSSを反映させる
まずはCSSファイルを作成して保存する。保存先だが、CSSを反映させたいHTMLファイルがある所と同じ層の所に保存すると下のパスの指定が楽になる（ファイル名を直接指定するだけ）。
CSSを反映させたいHTMLファイルを開き、以下のようにしてCSSファイルを指定する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="（反映させたい任意のCSSファイル名）.css" />
<title>Document</title>
</head>
<body>
<p>※※ここに本文を書く※※</p>
</body>
</html>
これでCSSがHTMLプレビューに反映されるようになる。
コメント