HTMLを入力補完で簡単・素早く記述｜VSCodeなどでのEmmetの利用例
Windows・Macなどで利用できる無料ソースコードエディタのVisual Studio Code（以下、VSCodeと表記）では、Emmetと呼ばれるテキストエディタ用プラグインをデフォルトの状態で利用できます。
今回は、そのEmmetでHTMLの入力補完を利用する例となります。
【Emmet】HTMLの入力補完を利用する例
タグの入力
要素のタグの入力補完を利用するには、以下の例のように要素名のみを入力します。
入力例
例えばpタグを入力する場合、 p と入力すると、p から始まるタグの候補が表示されるので、pタグを選択します。
Emmetの入力補完を利用した出力結果
<p></p>テキストを含むタグの入力
テキストを含むタグの入力補完を利用するには、以下の例のように、要素名に対して{}を追加し、その{}内にテキストを入力します。
入力例
a{リンク先のページ}Emmetの入力補完を利用した出力結果
<a href="">リンク先のページ</a>classを含むタグの入力
classを含むタグの入力補完を利用するには、以下の例のように、要素名に対して . を追加し、そのあとにclass名を入力します。
また、class名を複数追加する場合は、. のあとにclass名を追加する構文を繰り返します。
入力例
div.page.singleEmmetの入力補完を利用した出力結果
<div class="page single"></div>idを含むタグの入力
idを含むタグの入力補完を利用するには、以下の例のように、要素名に対して # を追加し、そのあとにid名を入力します。
入力例
div#headerEmmetの入力補完を利用した出力結果
<div id="header"></div>入れ子のタグを入力
入れ子のタグの入力補完を利用するには、以下の例のように、入れ子にする要素名を > でつなぎます。
入力例
div>pEmmetの入力補完を利用した出力結果
<div>
<p></p>
</div>兄弟のタグを入力
兄弟のタグの入力補完を利用するには、以下の例のように、兄弟にする要素名を ＋ でつなぎます。
入力例
div+pEmmetの入力補完を利用した出力結果
<div></div>
<p></p>複数の同じ兄弟タグ（リストなど）を入力
リストを記述する際など、複数の同じ兄弟タグの入力補完を利用するには、以下の例のように、要素名に対して * を追加し、そのあとに追加するタグの数を入力します。
また、タグ内のテキストやid、class名に $ を利用することで、連番を付与できます。
入力例
ul>li*4.item${アイテム$}Emmetの入力補完を利用した出力結果
<ul>
<li class="item1">アイテム1</li>
<li class="item2">アイテム2</li>
<li class="item3">アイテム3</li>
<li class="item4">アイテム4</li>
</ul>HTML5のテンプレートを入力
DOCTYPE 宣言を含むHTML5の基本的なテンプレートの入力補完を利用するには、以下の例のように ! を入力します。
入力例
!Emmetの入力補完を利用した出力結果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>まとめ
以上がEmmetでHTMLの入力補完を利用する例となります。
その他のEmmetの利用例については、文末の参考サイトを確認してみてください。