Emmetの使い方！よく使う記法も紹介

EmmetはHTMLやCSSのコーディングを効率化するためのツールで、Visual Studio Code（VS Code）などのエディタで広く使用されています。以下に、Emmetの基本的な使い方といくつかの具体例を紹介します。

Emmetの基本的な使い方

エディタを開く: VS Codeなどのエディタを開きます。
Emmetの入力: エディタの中でEmmetスニペットを入力します。
スニペットの展開: Tabキーを押してスニペットを展開します。

よく使われるEmmetのスニペット

HTMLの例

基本テンプレート

入力: !

展開後:

<!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>

div要素
- 入力: div
- 展開後:
```
<div></div>
```
idとclass属性を持つdiv
- 入力: div#header.container
- 展開後:
```
<div id="header" class="container"></div>
```
複数の子要素を持つ親要素
- 入力: ul>li*3
- 展開後:
```
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```
兄弟要素
- 入力: h1+p
- 展開後:
```
<h1></h1>
<p></p>
```
テキストを含む要素
- 入力: h1{Hello, World}
- 展開後:
```
<h1>Hello, World</h1>
```

CSSの例

基本プロパティ
- 入力: m10
- 展開後:
```
margin: 10px;
```

複数のプロパティ

入力: p10+m10+b

展開後:

padding: 10px;
margin: 10px;
border: 1px solid #000;

メディアクエリ
- 入力: @m
- 展開後:
```
@media screen and (max-width: 768px) {}
```

Emmetの特殊な使い方

カスタム属性
- 入力: a[href="https://example.com"]
- 展開後:
```
<a href="https://example.com"></a>
```
画像
- 入力: img[src="image.jpg" alt="description"]
- 展開後:
```
<img src="image.jpg" alt="description">
```
フォーム
- 入力: form>input[type="text"]+input[type="submit"]
- 展開後:
```
<form>
    <input type="text">
    <input type="submit">
</form>
```

Emmet: Wrap with Abbreviationの使い方

コードを選択: ラップしたいHTMLコードやテキストを選択します。
コマンドパレットを開く: Ctrl + Shift + P（Windows）または Cmd + Shift + P（Mac）を押してコマンドパレットを開きます。
Wrap with Abbreviationを実行: コマンドパレットに「Emmet: Wrap with Abbreviation」と入力し、選択します。
スニペットを入力: 出てきた入力フィールドに、使用したいEmmetのスニペットを入力します。
Enterキーを押す: Enterキーを押すと、選択したコードが指定したEmmetスニペットでラップされます。

例：選択したコードが以下の場合

<p>Hello, World!</p>

「Emmet: Wrap with Abbreviation」で div.wrapper と入力すると、以下のように変換されます：

<div class="wrapper">
    <p>Hello, World!</p>
</div>

Emmetを使うことで、HTMLやCSSのコーディングが大幅に効率化されます。ぜひ活用してみてください。

以下は、よく使われるEmmetのパターンを表にまとめたものです。

パターン	入力	出力
HTMLテンプレート	`!`	`html<br><!DOCTYPE html><br><html><br><head><br> <meta charset="UTF-8"><br> <title>Document</title><br></head><br><body><br></body><br></html>`
div要素	`div`	`<div></div>`
id属性	`div#header`	`<div id="header"></div>`
class属性	`div.container`	`<div class="container"></div>`
id + class属性	`div#header.container`	`<div id="header" class="container"></div>`
子要素	`ul>li`	`<ul><li></li></ul>`
子要素*3	`ul>li*3`	`<ul><li></li><li></li><li></li></ul>`
兄弟要素	`h1+p`	`<h1></h1><p></p>`
テキスト	`h1{Hello}`	`<h1>Hello</h1>`
属性付き要素	`a[href="https://example.com"]`	`<a href="https://example.com"></a>`
画像	`img[src="image.jpg" alt="description"]`	`<img src="image.jpg" alt="description">`
フォーム	`form>input:text+input:submit`	`<form><input type="text"><input type="submit"></form>`
新しい行	`table>tr3>td2`	`<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>`
コメント	`div<!-- comment -->`	`<div><!-- comment --></div>`
HTML5テンプレート	`html:5`	`html<br><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br></head><br><body><br></body><br></html>`
ナビゲーション	`nav>ul>li*3>a`	`<nav><ul><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li></ul></nav>`
CSSクラス	`.class`	`<div class="class"></div>`
CSS id	`#id`	`<div id="id"></div>`
カスタム属性	`input[placeholder=Name]`	`<input placeholder="Name">`
ドキュメント書き出し	`<!DOCTYPE>`	`<!DOCTYPE html>`
テーブル	`table>tr>td`	`<table><tr><td></td></tr></table>`
テーブル行	`table>tr*3>td`	`<table><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table>`

これらのEmmetパターンを使うと、HTMLやCSSのコーディングが効率的になります。上記の表を参考に、Emmetのスニペットを活用してみてください。