HTMLを入力補完で簡単・素早く記述|VSCodeなどでのEmmetの利用例

Windows・Macなどで利用できる無料ソースコードエディタのVisual Studio Code(以下、VSCodeと表記)では、Emmetと呼ばれるテキストエディタ用プラグインをデフォルトの状態で利用できます。

そのEmmetでは、HTMLなどを入力補完によって、素早く簡単に記述できます。

今回は、HTML・PHPファイルなどでHTMLを記述する際に利用できる、Emmetを利用した入力補完の基本的な例となります。

EmmetでHTMLを入力補完する例

タグの入力

要素のタグの入力補完を利用するには、以下の例のように要素名のみを入力します。

入力例

例えばpタグを入力する場合、 p と入力すると、p から始まるタグの候補が表示されるので、pタグを選択します。

Emmetの入力補完を利用した出力結果

<p></p>

テキストを含むタグの入力

テキストを含むタグの入力補完を利用するには、以下の例のように、要素名に対して{}を追加し、その{}内にテキストを入力します。

入力例

a{リンク先のページ}

Emmetの入力補完を利用した出力結果

<a href="">リンク先のページ</a>

classを含むタグの入力

classを含むタグの入力補完を利用するには、以下の例のように、要素名に対して . を追加し、そのあとにclass名を入力します。

また、class名を複数追加する場合は、. のあとにclass名を追加する構文を繰り返します。

入力例

div.page.single

Emmetの入力補完を利用した出力結果

<div class="page single"></div>

idを含むタグの入力

idを含むタグの入力補完を利用するには、以下の例のように、要素名に対して # を追加し、そのあとにid名を入力します。

入力例

div#header

Emmetの入力補完を利用した出力結果

<div id="header"></div>

入れ子のタグを入力

入れ子のタグの入力補完を利用するには、以下の例のように、入れ子にする要素名を > でつなぎます。

入力例

div>p

Emmetの入力補完を利用した出力結果

<div>
    <p></p>
</div>

兄弟のタグを入力

兄弟のタグの入力補完を利用するには、以下の例のように、兄弟にする要素名を + でつなぎます。

入力例

div+p

Emmetの入力補完を利用した出力結果

<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を利用した入力補完の基本的な例となります。

その他のEmmetの利用例については、文末の参考サイト内を確認してみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。