Emmetを使って爆速でHTMLを書いてみよう！

はじめに

Emmet(エメット)とは、EnterキーやTabキーを押すだけで自動変換され記述できる便利な機能です。

今回はよく使う基本的なもののご紹介です。

<div>とかいちいち手打ちするのは今日で終わりにしましょう！

VSCodeはデフォルトでEmmetを利用できます

タグ

 div

と書いてEnter押すだけ

 <div></div>

開始タグと終了タグが挿入されます。

クラス名付きのタグ

div.apple

と書いてEnter押したら

<div class="apple"></div>

タグ.クラス名でクラス名付きの要素を展開できます。

idもいけるよ

header#orange

と書けば

<header id="orange"></header>

ちなみに、タグを省略した場合はdivタグが自動的に付与されるので、

 .apple
 #orange

で

<div class="apple"></div>
<div id="orange"></div>

クラスやidつきのdivタグがすぐ出せちゃいます。

兄弟要素を展開したい時は

div+p

と書けば

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

+で兄弟要素を展開することができます。

リストたくさん書く時めんどうな時は

li*10

と書いて

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

「*数字」で繰り返しできます。

ネストさせたい時は

ul>li

と書けば

<ul>
<li></li>
</ul>

「要素>要素」でネスト構造の要素を展開できます。

テーブル要素もあっという間に

table>tbody>(tr>th+td)*3 

と書けば

<table>
 <tbody>
   <tr>
     <th></th>
     <td></td>
   </tr>
   <tr>
     <th></th>
     <td></td>
   </tr>
   <tr>
     <th></th>
     <td></td>
   </tr>
 </tbody>
</table>

()を使うことでグループを作れます。

コメントアウトしたい時は

テスト

コメントアウトしたい文字を選択して、

{/* テスト */}

Ctrl +/を押すとコメントアウトできます。

まとめ

今回は、VSCodeでHTMLをEmmetで記述する基本的な方法をご紹介しました。

エメット記法を覚えてしまうとコーディングがすごく早くなりますので、ぜひ試してみてください！

最後に

私の働いている会社で、経験の有無を問わず採用を行っています。
興味のある方は是非カジュアル面談から応募してみてください！