【簡単】HTMLをリアルタイムでプレビューする2つの方法【VS Code・Code Pen】

著者:牧野健人

非エンジニアでも簡単に扱えるHTMLのリアルタイムプレビュー環境を2つ解説します。

Web制作の過程でリアルタイムプレビューを使いたい場合
Visual Studio Code(VS Code)
とりあえず今手元でプレビューできればよい場合
CodePen

以下でそれぞれ説明していきます。

VS CodeでHTMLをリアルタイムプレビューする

Visual Studio Code(VS Code)はマイクロソフトが提供している無料のコードエディタです。

「コードエディタを使ってリアルタイムプレビューの環境を作る」と聞くと難しそうな印象を受けるかもしれませんが、実際は非常に簡単で3分ほどで完了します。

「ローカルサーバーを立ち上げてブラウザでプレビューする方法」と「VS CodeのUI上でプレビューする方法」がありますので、以下でそれぞれ解説します。

いずれにせよまずはVS Codeが必要なので、下記のページからダウンロードしてPCにインストールしましょう。

VSCodeダウンロードページ

VS Codeのダウンロードページ

VS Codeのデフォルトは英語です。日本語に変えたい場合は、左サイドバーにあるExtensionsから”Japanese Language Pack for VS Code”を検索し、インストールすればOKです。

ローカルサーバーを立ち上げてブラウザでプレビューする

VS CodeではLive Serverという拡張機能を使うことで簡単にローカルサーバーを立ち上げられます。そこではファイルが更新されるとブラウザも自動的に更新されるため、リアルタイムでファイルをプレビューすることができます

Live Serverをインストールする

左サイドバーのExtensions(日本語化している場合は「拡張機能」)をクリックし、Live Serverを検索してください。

Live Server

上記が表示されたらインストールしましょう。

プレビューしたいHTMLが入っているフォルダを開く

メニューのFile(ファイル)から、プレビューしたいHTMLが入っているフォルダを開きます。

VS Codeでフォルダを開く

ここでフォルダでなくHTMLファイルそのものを開くとプレビューできなくなるので注意しましょう

Go Liveをクリックする

Live Serverがインストールされていれば、画面の右下にGo Liveという選択肢が表示されます。そこをクリックすることでローカルサーバーが立ち上がり、ブラウザでHTMLが表示されます。

VS CodeでGo Live

VS CodeのUI上でプレビューする

より手軽に、VS CodeのUI上でプレビューできる拡張機能もあります。ExtensionsからHTML Previewと検索し、下記が表示されたらインストールしてください。

HTML Preview

ファイルに戻り、command + Shift + P(Windows:Ctrl + Shift + P)を押すと表示される検索窓から、HTML: Open Preview the the Sideを選択します。

すると以下のように画面が分割されVS Code上でHTMLをプレビューできます。

Vs Codeでプレビュー

CodePenでHTMLをリアルタイムプレビューする

とりあえず今手元でプレビューできればよい場合、VS Codeをインストールするよりもさらに手軽に実現できるのがCode Penです。

Code PenはHTML, CSS, JavaScriptをブラウザ上のコーディング画面に記述することで表示をリアルタイムプレビューできるWebサービスです。

ソフトをインストールする必要も無いので、非常に手軽にプレビュー環境を利用できます。

まずは下記からCode Penにアクセスしてください。

Code Pen

左上の方にあるStart Codingをクリックします。

Code Pen

すると下記の画面が表示され、ここでHTML, CSS, JavaScriptを記述でするとリアルタイムでプレビューを確認することができます。

Code Penのコーディング画面

ヘッダーにあるChange Viewから画面のレイアウトを変えることも可能です。

Code Penのコーディング画面のレイアウトを変更する
牧野健人

著者牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。

お問い合わせはフォームよりお願いいたします。

お気軽にご相談ください

Webサイトに関する課題をお持ちの方はお気軽にご連絡ください。
課題が曖昧な状態でのご相談でも大丈夫です。

改善点や競合との比較がわかる無料サイト診断 無料相談・お問い合わせ
改善点や競合との比較がわかる無料のサイト診断