はじめに

はじめまして！sato (@ameRese) と申します。
プログラミングは過去に少し仕事で関わっていた程度ですが、
最近本気で勉強し直そうと考え、現在はHTMLやCSSの勉強からやり直しているところです。

今回はHTMLを素早く書くことができるEmmetについて記事を書きたいと思います。

Emmet (エメット) とは？

Emmetとは、入力補完機能によりHTMLやCSS等を素早く編集できる、
テキストエディタ用プラグインです。
VSCodeやCursorには最初から搭載されています。
↓こんなことができます↓

たくさんの記法があるようですが、今回は私がよく使うものに絞って紹介します。
詳しく知りたい方は以下のチートシートを参照してください。

使い方

キーワードを入力してTabキーまたはEnterキーを押すだけです

よく使うキーワード

タグのみ

h1
↓↓
<h1></h1>

クラス付きのタグ

article.post
↓↓
<article class="post"></article>

id付きのタグ

section#about
↓↓
<section id="about"></section>

タグ省略時はdivタグに

.testclass
↓↓
<div class="testclass"></div>

#testid
↓↓
<div id="testid"></div>

子要素を追加

figure>figcaption
↓↓
<figure>
    <figcaption></figcaption>
</figure>

兄弟要素を追加

dt+dd
↓↓
<dt></dt>
<dd></dd>

繰り返し

li*3
↓↓
<li></li>
<li></li>
<li></li>

組み合わせも可能

table.info>(tr>th+td)*2
↓↓
<table class="info">
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

HTMLテンプレート

! (もしくはhtml:5)
↓↓
<!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はCSSでも活用できるので、機会があれば記事にする予定です。
また、今後学習の中で得た気付き等も記事にしていけたらと考えています。