はじめに
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で記述する基本的な方法をご紹介しました。
エメット記法を覚えてしまうとコーディングがすごく早くなりますので、ぜひ試してみてください！
最後に
私の働いている会社で、経験の有無を問わず採用を行っています。
興味のある方は是非カジュアル面談から応募してみてください！