その他

「Visual Studio Code」でHTMLの練習・学習に便利な拡張機能2つ

何年も前に一度HTMLの基礎を勉強していたのですが、もっとしっかりとした知識やスキルを身に付けたいと思い、再び独学で勉強し直しています。

それにあたって「Visual Studio Code」というテキストエディタをインストールして、HTMLのコーディングを練習するための環境を整えつつあります。

まずはHTMLのコーディング練習に便利な「Live HTML Previewer」「Auto Close Tag」という2つの拡張機能を追加したので、ここではそのインストール方法と使い方をまとめたいと思います。

 

「Live HTML Previewer」の導入方法



「Live HTML Previewer」は、HTMLのタグを入力しながらリアルタイムでプレビューを確認することができる拡張機能です。

ブラウザと切り替えることなく、「Visual Studio Code」の中でエディタと並べてプレビューを確認できるので便利です。

それでは、以下に「Live HTML Previewer」のインストール方法と使い方を説明します。

 

インストール方法



では、「Live HTML Previewer」のインストール手順について説明します。

まずは「Visual Studio Code」を起動し、左側にある「Extensions」というアイコンをクリックします。

すると検索ボックスが表示されるので、そこに「Live HTML Previewer」と入力。



次に検索結果で一番上に表示される「Live HTML Previewer」の「インストール」をクリックします。

そして、以下の表示になったら「再読み込み」もしくは「再読込してアクティブにする」をクリックします。

再読み込み後、以下のように「Live HTML Previewer」が有効になったら完了です。

 

使い方



上記の手順で「Live HTML Previewer」が有効になったら、HTMLファイルをエディタで開き、そのプレビューを並べて表示することができます。

プレビューを表示するにはいくつか方法がありますが、一番簡単なのは左下の「Preview Available」クリックする方法です。

「Visual Studio Code」でHTMLファイルを開いていると、以下のように画面左下に「Preview Available」という文字が表示されます。



その部分をクリックすると、以下のようにエディタと並んでプレビューが表示されます。



もしくは、「F1」キーを押下してコマンドパレットを表示し、「Show side preview」と入力してもプレビューを横に並べて表示することができます。

 また、プレビューを別のタブに全画面で表示することも可能です。その場合には、コマンドパレットに「show full preview」と入力します。







ちなみに、HTMLファイルをブラウザで表示したい場合には、エディタ上で右クリックし「Open in browser」とクリックするとブラウザが開きます。



 

「Auto Close Tag」の導入方法



次に、開始タグを入力すると自動でその終了タグを入力してくれる拡張機能「Auto Close Tag」の使い方を説明します。

 

インストール手順



インストールの方法は「Live HTML Previewer」と同じです。

まずは左側の「Extensions」というアイコンをクリックし、検索ボックスに「Auto Close Tag」と入力します。



検索結果に表示された「Auto Close Tag」の「インストール」ボタンをクリックします。

そして、以下の画面になったら「再読み込み」もしくは「最読み込みしてアクティブにする」をクリックします。

少しして、以下のように有効になったら完了です。



 

使い方



「Auto Close Tag」はインストールして有効にしたら、そのまま使うことが可能です。

HTMLファイルをエディタで開き、そこにHTMLの開始タグを入力します。

開始タグの最後の「>」を入力すると、自動的に終了タグが入力され、カーソルが開始タグと終了タグの間に残ります。

HTMLを学習し始めたばかりで使うと勉強にならないかもしれませんが、この拡張機能を使うことで、タグを入力する手間が減らせることと、入力し忘れることを防ぐことができ便利です。

 

まとめ



以上、「Visual Studio Code」でHTML時に便利な拡張機能の使い方を2つ説明しました。

まず「Live HTML Previewer」はHTMLのタグを入力しながらリアルタイムでプレビューを表示することができます。いちいちタブを切り替えたりブラウザを起動したりする必要がないので効率的に作業を進めることができます。

また「Auto Close Tag」は、開始タグを入力すると自動的に終了タグが入力されるので、入力の手間やタグの入力し忘れを防ぐことができます。

どちらも便利なので、「Visual Studio Code」でHTMLを書いていくという場合には試してみると良いかと思います。
Share:
シゴトピ編集部