【高速コーディング】Emmetを使ってみよう!

##目次

- [目次](#目次)
- [はじめに](#はじめに)
- [Emmetって?](#emmetって)
    - [Emmet公式サイト](#emmet公式サイト)
    - [どうやって使うの?](#どうやって使うの)
- [HTMLでの書き方](#htmlでの書き方)
    - [基本の書き方(HTML)](#基本の書き方html)
        - [基本構文(HTML)](#基本構文html)
        - [不明なタグ名の場合](#不明なタグ名の場合)
        - [略語中の`:` と `-` の区別](#略語中の--と---の区別)
        - [タグ名の省略形](#タグ名の省略形)
    - [HTMLファイルを書き始めるとき](#htmlファイルを書き始めるとき)
    - [タグ構造を展開してみよう](#タグ構造を展開してみよう)
        - [タグの構造的な関係性を示す記号一覧](#タグの構造的な関係性を示す記号一覧)
        - [実際の展開例(HTML)](#実際の展開例html)
            - [`>` : 次の要素を子要素として追加(階層が一つ下)](#--次の要素を子要素として追加階層が一つ下)
            - [`+` : 次の要素を兄弟要素として追加(階層は同じ)](#--次の要素を兄弟要素として追加階層は同じ)
            - [`*n` : その要素をn回繰り返す](#n--その要素をn回繰り返す)
            - [入れ子の内側に入ったままでは先に進めない?](#入れ子の内側に入ったままでは先に進めない)
            - [`^` : 次の要素を一つ親の兄弟要素として追加(階層が一つ上)](#--次の要素を一つ親の兄弟要素として追加階層が一つ上)
            - [`(　)` : 括弧内をグルーピング](#--括弧内をグルーピング)
            - [`#` : IDを付ける　`.` : クラスを付ける](#--idを付ける--クラスを付ける)
            - [`[　]` : 属性を付ける](#--属性を付ける)
            - [`{　}` : テキストを付ける](#--テキストを付ける)
            - [`$` : ナンバリングを付ける](#--ナンバリングを付ける)
            - [テキストの流し込み](#テキストの流し込み)
    - [複数のタグ構造をまとめて展開できる特別な略語](#複数のタグ構造をまとめて展開できる特別な略語)
- [CSSでの書き方](#cssでの書き方)
    - [基本の書き方(CSS)](#基本の書き方css)
        - [基本構文(CSS)](#基本構文css)
        - [複数プロパティの一括書き出し](#複数プロパティの一括書き出し)
        - [値を代入して展開](#値を代入して展開)
        - [値の単位について](#値の単位について)
        - [色の指定方法](#色の指定方法)
        - [複数の値を代入する](#複数の値を代入する)
    - [主要な略語一覧](#主要な略語一覧)
        - [ボックスのプロパティ](#ボックスのプロパティ)
        - [マージンとパディング](#マージンとパディング)
        - [ボックスの配置や重なり順に関するプロパティ](#ボックスの配置や重なり順に関するプロパティ)
        - [要素・カーソルの表示に関するプロパティ](#要素カーソルの表示に関するプロパティ)
        - [フレックスボックスに関するプロパティ](#フレックスボックスに関するプロパティ)
        - [リストに関するプロパティ](#リストに関するプロパティ)
        - [要素の境界線に関するプロパティ](#要素の境界線に関するプロパティ)
        - [要素の背景に関するプロパティ](#要素の背景に関するプロパティ)
        - [テキストに関するプロパティ](#テキストに関するプロパティ)
        - [フォントに関するプロパティ](#フォントに関するプロパティ)
        - [色指定に関するプロパティ](#色指定に関するプロパティ)
        - [要素の変化に関するプロパティ](#要素の変化に関するプロパティ)
        - [要素のアニメーションに関するプロパティ](#要素のアニメーションに関するプロパティ)
        - [主に擬似要素などで使うプロパティ](#主に擬似要素などで使うプロパティ)
        - [CSSで使うその他の略語](#cssで使うその他の略語)
- [おわりに](#おわりに)

\(初投稿で張り切って書いてたところ、気がついたら大変長くなっていました...！\)


---

##はじめに

---

皆さんはEmmet(エメット)をご存知でしょうか?　Emmetとは、短い略語でHTMLやCSSを書くことができる、入力補完ツールです。

私がEmmetを知ったのはWebを学び初めてから2年目のことでした。それまではCSSプロパティやHTMLタグを...

```
width: 100px;
height: 100px;
```

...のように打ち込んでいました。
しかし、Emmetを使えば...

```
w100+h100　　　/* Tabキーを押してCSSを展開する */
```

...のように入力するコードを大幅に短縮できるのです。これにより、コーディングのスビードが大幅にアップしました。Emmetではエディタの補完機能に比べて極力短くなるように省略されているため、更なる効率アップを図れます。

それでは、Emmetとはどのようなものかを見ていきましょう。

---

##Emmetって?

---

Emmetは特定のエディタに特化されていない、汎用的な補完機能のツールです。

対応しているエディタは公式サイトのダウンロードページ(次項)から確認できます。様々なエディタに対応していますが、標準でサポートされているエディタがある一方で、プラグインを追加でダウンロードして使うエディタ、部分的にしかサポートされていないエディタもあるので、使い始める前に確認しておくと安心です。

---

###Emmet公式サイト

|項目|リンク先|
|:-:|:-:|
|Emmet 公式サイト|https://emmet.io/|
|対応エディタ一覧・<br>プラグインダウンロード|https://emmet.io/download/|
|仕様・構文|https://docs.emmet.io/|
|チートシート|https://docs.emmet.io/cheat-sheet/|
|チートシート<br>(PDF,A5サイズ)|https://docs.emmet.io/cheatsheet-a5.pdf|

---

###動作確認環境&導入方法

【PC】
MacOS 10.14.6

【エディタ】
当記事では、AtomとVS Codeで動作を確認しています。

>(注)：公式サイトのダウンロードページで `Third-party support` の項目に書いてあるエディタ(VS CodeやVimなど)は一部のみのサポートで、一部の構文が使えないことがあります。当記事ではAtomとVisual Studio Code(VS Code)で動作を確認していますが、エディタによっては違う挙動を取ることがありますのでご注意ください。


◆Atom 1.41.0
導入方法
Preferences(環境設定) > Install(インストール) で[Packages(パッケージ)]を選択、 `emmet` で検索すると発行元が `emmetio` のパッケージが出てくるのでインストールを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503687/ae91e0c7-02a0-3872-c9c1-7cd86ab3d9e6.png)

◆Visual Studio Code 1.40.0
基本設定 > 設定 で検索バーに `emmet` と入れると `Emmet: Trigger Expansion On Tab` という項目が出てくるので、チェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503687/e08b395c-d07d-b7d5-cf02-ef0a9e60f83a.png)

その他のエディタでの導入の仕方は、各自でお調べくださいませ。

---

###どうやって使うの?

HTMLタグやCSSプロパティの略語、またはタグ構造を打ちこんでTabキーを押すことで展開されます。例えばこんな感じです：

【HTMLの場合】

```text:打ち込み
.nav-wrapper>nav>ul>(li.list-item>a)*6^^p
```

<KBD>Tab</KBD> キーを押して展開

```html:展開後
<div class="nav-wrapper">
    <nav>
        <ul>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
        </ul>
    </nav>
    <p></p>
</div>
```

---

【CSSの場合】


```text:打ち込み
.selector
{
    w300+h300+m0-a-30+fz18+fwb+tac+bd2-s#888
}
```

<KBD>Tab</KBD> キーを押して展開

```css:展開後
.selector
{
    width: 300px;
    height: 300px;
    margin: 0 auto 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #888;
}
```

展開すると「増えるわかめ」のように増えますね。慣れないうちは「訳わかめ」ですが、この量のコードをこれだけ圧縮できるので、コーディングをかなり効率化することができると思います。

---

##HTMLでの書き方

---

### 基本の書き方(HTML)
#### 基本構文(HTML)

HTMLの場合、基本的にはタグの中身の文字列を書いてTabキーを押すと展開されます。閉じタグも自動生成するので、HTMLの構文ミスの防止にも繋がります。

>例： `span` <KBD>Tab</KBD> → `<span></span>`

---

#### 不明なタグ名の場合

不明なタグ名が入力された場合、その文字列そのままのタグが生成されます。

>例： `banana` <KBD>Tab</KBD> → `<banana></banana>`

---

#### 略語中の `:` と `-` の区別

公式ドキュメントの解説に出てくる、タグ名と属性の区切り文字 `:` (コロン)は `-` (ハイフン)でも代用可能です。展開された後の結果に影響はないので、好きな方を使うと良いでしょう。[^V]
(注)：一部のみサポートのエディタでは`<input-t>`のようにそのまま展開されてしまうことがあります。

>例： `input:t` と `input-t` は同じものと解釈されて展開される

---

#### タグ名の省略形

長い名前のタグなどの一部のタグは略称で展開することが可能だったりします。

>例： `fig` <KBD>Tab</KBD> → `<figure></figure>`

長いタグの省略形一覧(主要なもののみ)

|略語|展開後|説明|
|:--|:--|:--|
|`hdr`|`<header></header>`||
|`mn`|`<main></main>`||
|`ftr`|`<footer></footer>`||
|`fig`|`<figure></figure>`||
|`btn`|`<button></button>`||
|`str`|`<strong></strong>`||

---

### HTMLファイルを書き始めるとき

それでは早速、Emmetを使ってHTMLを書いてみましょう。
作成するページがHTML5であれば、 `!` または `html:5` (または `html-5`[^V]) と書打ち込みます。
(HTML4.01であれば `html:4t`[^V] )

```text:htmlの書き始め
!
```

<KBD>Tab</KBD> キーを押して、展開します。

```html:htmlの書き始め　展開後
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
<body>
    
</body>
</html>
```
いかがでしょうか。わずかコンマ数秒で `<body>` の中身を作れる準備が整いました。
必要に応じてタイトルを編集したり、日本語のベージならば `<html lang="ja">` にするなど修正を行いましょう。

余談：`![lang=ja]` ( または `html:5[lang=ja]` )と書いて展開すると、日本語の設定 `<html lang="ja">` が付加された状態で展開します。[^V]

---

### タグ構造を展開してみよう

HTMLの文書構造は、とにかくタグの入れ子の嵐です。打ち込む前に頭の中でタグの構造を思い描けているなら、タグを一つずつ展開するよりも、先ほどの `!` のようにまとめて展開できた方が早くて爽快でしょう。ここでは、入れ子などの構造の書き方を見ていきます。

---

#### タグの構造的な関係性を示す記号一覧

まずは記号の一覧を示します。沢山あるので、一つ一つ解説していきます。

|記号|役割|
|:-:|:--|
|>|次の要素を子要素として追加(階層が一つ下)|
|+|次の要素を兄弟要素として追加(階層は同じ)|
|*n|その要素をn回繰り返す|
|^|次の要素を一つ親の兄弟要素として追加(階層が一つ上)|
|(　)|括弧内をグルーピング|
|#|IDを付ける|
|.|クラスを付ける|
|[　]|属性を付ける|
|{　}|テキストを付ける|
|$|ナンバリングを付ける|

---

#### 実際の展開例(HTML)

表の前半5つはタグの構造に関する記号です。どのような役割があるのか、1つずつ順番に見ていきましょう。
ここでは、Emmetを用いて「果物のリスト」ページを作って説明します。

```html:完成イメージ
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
    <li id="fruit-00" class="fruit-item">バナナ</li>
    <li id="fruit-01" class="fruit-item">リンゴ</li>
    <li id="fruit-02" class="fruit-item">メロン</li>
    <li id="fruit-03" class="fruit-item">モモ</li>
    <li id="fruit-04" class="fruit-item">イチゴ</li>
    <li id="fruit-05" class="fruit-item">パイナップル</li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>

```

---

##### `>` : 次の要素を子要素として追加(階層が一つ下)

リストを作るので、まずは `<ul>` の子要素として `<li>` を作成してみましょう。

```text:子要素として追加
ul>li
```

<KBD>Tab</KBD> キーで展開

```html:子要素として追加　展開後
<ul>
    <li></li>
</ul>
```

`>` と書くことにより `<ul>` の内側に入り、 `<li>` を作ることができました。「 `>` の形はインデントを付ける(右にずれる)イメージ」とすると覚えやすいかもしれません。
次に、タグの内側ではなく、前や後に隣接させたい場合はどうすれば良いのでしょうか?

---

##### `+` : 次の要素を兄弟要素として追加(階層は同じ)

何のリストかを知るには、タイトルが欲しいですね。
 `<ul>` 要素の前に `<h2>` を追加してみます。

```text:兄弟要素として追加
h2+ul>li
```

<KBD>Tab</KBD> キーで展開

```html:兄弟要素として追加　展開後
<h2></h2>
<ul>
    <li></li>
</ul>
```

今度は入れ子の関係ではなく、同じ階層に並んでいる状態になりました。タグを列挙する時は `+` を使用します。この記号はCSSの方でもよく使うので、覚えておきましょう。

---

##### `*n` : その要素をn回繰り返す

前々項では、 `<ul>` の中に `<li>` を1つ作成することができました。しかし実際にリストを作る際は `<li>` が複数個欲しいところです。例えば `<li>` を6個作りたい時、前項で登場した `+` を使って `li+li+li+li+li+li` と表すこともできますが、もっとスマートな書き方があります。個数を指定して `li*6` と掛け算のように記述することで、まとめて作成することができます。

```text:n回繰り返す
h2+ul>li*6
```

<KBD>Tab</KBD> キーで展開

```html:n回繰り返す　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

---

##### 入れ子の内側に入ったままでは先に進めない?

それでは、 `</ul>` の後に注釈の `<p>` を追加したい時はどう書くのでしょうか? 
`h2+ul>li*6` の後ろに並べるんだから、 `+` を使って `h2+ul>li*6+p` だ！ とすると・・・ 

```html:h2+ul>li*6+p　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <p></p>
</ul>
```

`<li>` と同じ階層で隣接するように `<ul>` の中に `<p>` が入ってしまいます。
Emmetで展開する時は前から読んでいくので、 `<li>` の時点では `<ul>` の内側にいます(カーソルがその位置にあると思ってください)。その位置のまま後ろにくっ付けてしまうので、 `<ul>` の子要素として `<p>` が追加されてしまいます。
この問題を解決するには、 `<ul>` の外に出てから `<p>` を追加する必要です。方法は2通りあります。

---

##### `^` : 次の要素を一つ親の兄弟要素として追加(階層が一つ上)

`h2+ul>li` と書いた時、最後にいる位置は `<ul>` の内側です( `>` で内側に入り込んでいるため)。 `</ul>` の後ろに `<p>` を追加する際は `^` を使って `<ul>` の外に出る必要があります。

```text:一つ親の兄弟要素として追加
h2+ul>li*6^p
```

<KBD>Tab</KBD> キーで展開

```html:一つ親の兄弟要素として追加　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p></p>
```

これで `<ul>` の外に出てから `<p>` を追加することができました。もし2段階外側に出たい時は `^^` のように連続して書きます。

---

##### `(　)` : 括弧内をグルーピング

`</ul>` の後ろに `<p>` を追加する問題では、もう一つ解決方法があります。要素を `(　)` で括ると一つのまとまりとして処理されます。`(ul>li)` のようにまとめれば入れ子の構造が無くなるので `+` で `<p>` を追加することができます。

```text:括弧内をグルーピング
h2+(ul>li*6)+p
```

<KBD>Tab</KBD> キーで展開

```html:括弧内をグルーピング　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p></p>
```

`^` で展開した時と同じ結果となりました。同じ構造でも、異なる書き方ができるようです。以下にそれぞれの書き方についてメリット・デメリットをまとめました。

||`^`|`(　)`|
|:--|:--|:--|
|メリット|カーソル移動が少なく打てる|構造が分かりやすい|
|デメリット|構造が分かりづらい|括弧の中身を書くのでカーソル移動が発生する|

`(　)` と `^` は使いやすいと感じる方を使うと良いでしょう。

タグの構造に関わるところは以上になります。これで、HTML上の全ての構造の全てをEmmetで表せるようになりました！　次は、タグに様々なオプションを付けていきましょう。

---

##### `#` : IDを付ける　`.` : クラスを付ける

要素をCSS側で装飾したり、Javascript側で操作するときにする時にほぼ必須となるIDやクラスもEmmetで追加が可能です。CSSやjQueryのセレクターと同じように、要素名の後に `#ID名` や `.クラス名` をつければOKです。どのように展開されるのか、下の表をご覧ください。

|略語|展開後|説明|
|:--|:--|:--|
|`ul#list01`|`<ul id="list01"></ul>`|IDを付ける|
|`ul.list`|`<ul class="list"></ul>`|クラスを付ける|
|`ul.list.red`|`<ul class="list red"></ul>`|複数のクラスを付ける時は隙間を開けずに連続して書く|
|`ul.list#list01.red`|`<ul class="list red" id="list01"></ul>`|IDとクラスを混ぜても展開時にまとめてくれる|

では、先ほどのリストにIDとクラスを付けてみましょう。

```text:IDとクラスを付ける
h2+(ul#list01.fluits-list>li.fruit-item*6)+p
```

ちょっと長くなりますが、「タグ構造を表す記号」が現れるまでは同じ要素です。
`h2` + ( `ul#list01.fluits-list` > `li.fruit-item` * 6 ) + `p` という区切りになっていることに注意して見てみましょう。

<KBD>Tab</KBD> キーで展開

```html:IDとクラスを付ける　展開後
<h2></h2>
<ul id="list01" class="fluits-list">
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
</ul>
<p></p>
```

タグの展開時にID・クラス付けることができました。 `*6` とすることで、クラス名のついた `<li>` を6つ複製しています。次の項では、一般的な属性を追加していきます。

---

##### `[　]` : 属性を付ける

`id` や `class` も属性の一つですが、それ以外の属性、例えば `<img>` に設定する `src` `alt` や `<a>` に設定する `href` などの属性は `[属性名=値]` というように設定します。属性値はクォーテーション `""` で囲う必要はありません。

|略語|展開後|説明|
|:--|:--|:--|
|`a[href=index.html]`|`<a href="index.html"></a>`|VS Codeでは `onclick=func()` などの括弧がある属性値だと展開できず|
|`img[src=img001.jpg alt=画像1]`|`<img src="img001.jpg" alt="画像1">`|複数の属性の書き方１：<br>スペース区切りで記述する|
|`img[src=img001.jpg][alt=画像1]`|`<img src="img001.jpg" alt="画像1">`|複数の属性の書き方２：<br>[　]を分けて記述する|
|`img`|`<img src="" alt="">`|対象のタグでほぼ必須となる属性は自動的に付加される(但し、属性は空文字列となる)|

「とりあえず必須の属性の記述だけを用意したい」のであれば、タグ名を打ち込むだけで補完してくれます。

それでは、リストの後のpタグの文字を赤にしてみましょう。style属性に `color:blueviolet;` を設定します。。

```text:属性を付ける
h2+(ul#list01.fluits-list>li.fruit-item*6)+p[style=color:blueviolet;]
```

<KBD>Tab</KBD> キーで展開

```html:属性を付ける　展開後
<h2></h2>
<ul id="list01" class="fluits-list">
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
</ul>
<p style="color:blueviolet;"></p>
```

---

##### `{　}` : テキストを付ける

タグの中に入れ込む文字列を展開前の段階で書き込むことが可能です。ただし、繰り返し複数個のタグを書き出す部分は同一内容のテキストでしか展開できません。

例えば、 `li*3` のような書き方ではテキストの内容が異なる `<li>東京</li><li>神田</li><li>秋葉原</li>` などは展開できません。違う内容のテキストであれば `li{東京}+li{神田}+li{秋葉原}` のようにしなければなりませんが、複数の `<li>` に同じクラスや連番のidを付ける場合は展開後にテキストを流し込んだ方が楽かもしれません。

|略語|展開後|説明|
|:--|:--|:--|
|`p{これはりんごです。}`|`<p>これはりんごです。</p>`||
|`p>{これはりんごです。}`|`<p>これはりんごです。</p>`|入れ子のテキスト部分、という書き方も可能|
|`p>{これは}+span[style=color:red;]{赤い}+{りんごです。}`|`<p>これは<span style="color:red;">赤い</span>りんごです。</p>`|テキストと子要素を並べて記述する際は、最初の文字時点で子要素としての記述が必要|

それでは、 `<h2>` と `<p>` の中にテキストを入れてみましょう。

```text:テキストを付ける
h2{くだものリスト}+(ul#list01.fluits-list>li.fruit-item*6)+p[style=color:blueviolet;]>{抽選でグレープジュースをプレゼント！詳細は}+a[href=grape.html]{こちら}+{をご覧下さい。}
```

<KBD>Tab</KBD> キーで展開

```html:テキストを付ける　展開後
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>
```

繰り返し構造内で同じテキストを入れ込む場合には有効ですが、そうではない時は展開前の構文が長くなってしまうので、展開後に流し込む形でも良いと思います。

---

##### `$` : ナンバリングを付ける

似たような要素にidを付ける時や、複数種類の画像を使う時のファイル名に `01` , `02` , `03` ...などの「連番」を使うことがあると思います。Emmetの繰り返しの書き出し構文の中で、連番を付けることも可能です。

|略語|展開後|説明|
|:--|:--|:--|
|`li#item-$*3`|`<li id="item-1"></li>`<br>`<li id="item-2"></li>`<br>`<li id="item-3"></li>`|通常は1から付番<br>`$` の後に `@` ：<br>連番の範囲指定をする|
|`li#item-$$$*3`|`<li id="item-001"></li>`<br>`<li id="item-002"></li>`<br>`<li id="item-003"></li>`|`$` をn文字連続：<br>常にn桁以上にする(0で補完)|
|`li#item-$@-*3`[^V]|`<li id="item-3"></li>`<br>`<li id="item-2"></li>`<br>`<li id="item-1"></li>`|`@` の後に `-` を記述：<br>逆順で付番する|
|`li#item-$@9*3`|`<li id="item-9"></li>`<br>`<li id="item-10"></li>`<br>`<li id="item-11"></li>`|`@` の後に0以上の整数：<br>その数字から付番する|
|`li#item-$@-9*3`[^V]|`<li id="item-11"></li>`<br>`<li id="item-10"></li>`<br>`<li id="item-9"></li>`|逆順と付番範囲の合わせ技|

それでは、 `<li>` に連番のidをつけてみましょう。

```text:ナンバリングを付ける
h2{くだものリスト}+(ul#list01.fluits-list>li#fruit-$$@0.fruit-item*6)+p[style=color:blueviolet;]>{抽選でグレープジュースをプレゼント！詳細は}+a[href=grape.html]{こちら}+{をご覧下さい。}
```

<KBD>Tab</KBD> キーで展開

```html:ナンバリングを付ける　展開後
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
	<li id="fruit-00" class="fruit-item"></li>
	<li id="fruit-01" class="fruit-item"></li>
	<li id="fruit-02" class="fruit-item"></li>
	<li id="fruit-03" class="fruit-item"></li>
	<li id="fruit-04" class="fruit-item"></li>
	<li id="fruit-05" class="fruit-item"></li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>
```

これで文書構造の組み立ては完了しました。あとはEmmetで展開時に入れることができない部分のテキストを流し込んで完成です。

---

##### テキストの流し込み

繰り返し構造の中の内容が異なるテキストは展開できないので、展開後に流し込みます。コピペです。

```html:テキストの流し込み
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
    <li id="fruit-00" class="fruit-item">バナナ</li>
    <li id="fruit-01" class="fruit-item">リンゴ</li>
    <li id="fruit-02" class="fruit-item">メロン</li>
    <li id="fruit-03" class="fruit-item">モモ</li>
    <li id="fruit-04" class="fruit-item">イチゴ</li>
    <li id="fruit-05" class="fruit-item">パイナップル</li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>
```

HTMLの構造の作成は以上になります！
おつかれさまでした。

---

### 複数のタグ構造をまとめて展開できる特別な略語 [^V]

HTMLでは、しばしば「このタグとあのタグはセットで使う」という場面があると思います。例えば、 `<ul>` と `<li>` 、`<table>` と `<tr>` と `<td>` などはほぽ必ずセットで用いると思います。そういった"セットもの"をまとめて展開できる書き方が一部のエディタで用意されています。[^V] 代表的なものを以下に挙げます：

|略語|展開後|説明|
|:--|:--|:--|
|`table+`|`<table>`<br>`　<tr>`<br>`　　<td></td>`<br>`　</tr>`<br>`</table>`||
|`tr+`|`<tr>`<br>`　<td></td>`<br>`</tr>`||
|`colg+`|`<colgroup>`<br>`　<col>`<br>`</colgroup>`|`colgroup+`でも展開可|
|`ol+`|`<ol>`<br>`　<li></li>`<br>`</ol>`||
|`ul+`|`<ul>`<br>`　<li></li>`<br>`</ul>`||
|`dl+`|`<dl>`<br>`　<dt></dt>`<br>`　<dd></dd>`<br>`</dl>`||
|`select+`|`<select name="" id="">`<br>`　<option value=""></option>`<br>`</select>`||

---

##CSSでの書き方

---

続いて、CSSでのEmmet展開方法です。CSSでは略語が大幅に短縮されているので、時間短縮効果も大きいはずです。

### 基本の書き方(CSS)
####基本構文(CSS)

CSSの場合、略語を入力してTabキーを押すと展開されます。CSSではあいまい検索で不明な略語を見つけるため、HTMLの時とは違って完全にその語句を打ち込んでしまうと別のプロパティが出てしまうことがあるので注意です。また、あいまい検索であることを利用して、公式ドキュメントに記載されているよりも短い略語で展開することも一部エディタでは可能です。

>例：widthを書き出したい時
>`w` <KBD>Tab</KBD> → `width: ;`
>`width` <KBD>Tab</KBD> → `widows: ;`　←違うプロパティが出てしまう
>
>例：overflow:visibleを書き出したい時
>`ov:v` <KBD>Tab</KBD> → `overflow:visible;` 公式ドキュメントの記述
>`ov-v` <KBD>Tab</KBD> → `overflow:visible;` 一部エディタでは "-" で代用可
>`ovv` <KBD>Tab</KBD> → `overflow:visible;` 一部エディタでは省略できることもある
>
>例：letter-spacingを書き出したい時
>`lts` <KBD>Tab</KBD> → `letter-spacing: ;` 公式ドキュメントの記述
>`ls` <KBD>Tab</KBD> → `letter-spacing: ;` より短い表記で出せることもある

---

#### 複数プロパティの一括書き出し

複数プロパティを同時に書きたい時は、 `+` で繋ぎます。

>例：widthとheightを一気に展開したい時
>`w+h`
>　↓　<KBD>Tab</KBD>
>`width: ;`
>`height: ;`

---

#### 値を代入して展開

展開時に値を入れたい場合は、略語の直後に(スペースを入れずに)書きます。

>例：widthを100pxに指定して展開したい時
>`w100` <KBD>Tab</KBD> → `width: 100px;`

---

#### 値の単位について

値に使用する単位(pxやemなど)も短縮できます。デフォルトでは、単位がない場合は `px` として処理されますが、 `line-height` `z-index` `font-weight` `opacity` などの一般的に単位なしで使われるプロパティではそのまま単位なしとして出力されます。

|略語|展開後|説明|
|:--|:--|:--|
|なし|`px`|一部のプロパティでは<br>単位無しで展開される|
|`e`|`em`||
|`p`|`%`||
|`r`|`rem`||
|`x`|`ex`||
|`文字列`|`文字列`|そのまま展開される|

---

#### 色の指定方法

色指定は `#08614f` のような16進数のカラーコードを略語の中に使うことができます。略語中で `(　)` が入ると動作をしなくなるため、 `rgb()` `rgba()` などは使えません(展開後に手動で打ち込みます)。デフォルトでは、カラーコードが3桁に短縮できる場合(例： `#00cccc` )は自動的に短縮されます。[^V]

>例：複数の値を設定
>`c#123456` <KBD>Tab</KBD> → `color: #123456;`
>`c#123` <KBD>Tab</KBD> → `color: #123;`[^V-different] #112233と同じ
>`c#12` <KBD>Tab</KBD> → `color: #121212;`
>`c#1` <KBD>Tab</KBD> → `color: #111;`[^V-different] #111111と同じ

なお、VS Codeでは色の値を含んだ場合、複数の値を入れての展開、複数プロパティをまとめて展開することができなくなります。

---

#### 複数の値を代入する

複数の値を設定したい時、略語の時点で単位がない場合は `-` で区切り、単位を付けている場合はそのまま次の値を記述します。ハイフンの後にマイナスの値が来る場合は `--` のように2つ続けて記述します。色指定の値を繋げる時、カラーコードの先頭 `#` が区切り文字となるので `-` は不要です。

>例：複数の値を設定
>`m10-20` <KBD>Tab</KBD> → `margin: 10px 20px;`
>`m10--20` <KBD>Tab</KBD> → `margin: 10px -20px;`
>`m10%20` <KBD>Tab</KBD> → `margin: 10% 20px;`
>`m10%-20` <KBD>Tab</KBD> → `margin: 10% -20px;`
>
>`bd1-s#8` <KBD>Tab</KBD> → `border: 2px solid #888;` solid のみ "s" で展開可能

---

### 主要な略語一覧

Emmet公式サイトにも略語一覧が掲載されていますが、その中にはどのブラウザでもサポートされていないマイナーなCSSプロパティが含まれています。ここでは「主なCSSの略語」のみを抜粋し、ジャンルごとにまとめています。

---

#### ボックスのプロパティ

CSSでかなりの頻度で使う、幅や高さの指定です。

|略語|展開後|値の変更|
|:--|:--|:--|
|`w`|`width: ;`|`:a` → `auto`|
|`maw`<br>`miw`|`max-width: ;`<br>`min-width: ;`|`:n` → `none`|
|`h`|`height: ;`|`:a` → `auto`|
|`mah`<br>`mih`|`max-height: ;`<br>`min-height: ;`|`:n` → `none`|
|`bxz`|`box-sizing: border-box;`|`:cb` → `content-box`<br>`:bb` → `border-box`|

---

#### マージンとパディング

要素間の隙間や要素内の余白を設定するのによく使うプロパティです。

|略語|展開後|値の変更|
|:--|:--|:--|
|`m`|`margin: ;`|`:a` → `auto`|
|`p`|`padding: ;`||

方向別の略語
top, right, bottom, left の4方向を個別に設定する用の略語も用意されています。

|プロパティ＼方向|`-top`|`-right`|`-bottom`|`-left`|
|:--|:--|:--|:--|:--|
|`margin-(方向): ;`|`mt`|`mr`|`mb`|`ml`|
|`padding-(方向): ;`|`pt`|`pr`|`pb`|`pl`|

---

#### ボックスの配置や重なり順に関するプロパティ

|略語|展開後|値の変更|
|:--|:--|:--|
|`pos`|`position: relative;`|`:s` → `static`<br>`:a` → `absolute`<br>`:r` → `relative`<br>`:f` → `fixed`|
|`t`<br>`r`<br>`b`<br>`l`|`top: ;`<br>`right: ;`<br>`bottom: ;`<br>`left: ;`|`:a` → `auto`|
|`fl`|`float: left;`|`:n` → `none`<br>`:l` → `left`<br>`:r` → `right`|
|`cl`|`clear: both;`|`:n` → `none`<br>`:l` → `left`<br>`:r` → `right`<br>`:b` → `both`|
|`z`|`z-index: ;`|`:a` → `auto`|

---

#### 要素・カーソルの表示に関するプロパティ

|略語|展開後|値の変更|
|:--|:--|:--|
|`d`|`display: block;`|`:n` → `none`<br>`:b` → `block`<br>`:f` → `flex`<br>`:if` → `inline-flex`<br>`:i` → `inline`<br>`:ib` → `inline-block`<br>`:li` → `list-item`<br>`:ri` → `run-in`<br>`:cp` → `compact`<br>`:tb` → `table`<br>`:itb` → `inline-table`<br>`:tbcp` → `table-caption`<br>`:tbcl` → `table-column`[^V]<br>`:tbclg` → `table-column-group`<br>`:tbhg` → `table-header-group`<br>`:tbfg` → `table-footer-group`<br>`:tbr` → `table-row`<br>`:tbrg` → `table-row-group`<br>`:tbc` → `table-cell`<br>`:rb` → `ruby`<br>`:rbb` → `ruby-base`[^V]<br>`:rbbg` → `ruby-base-group`[^V]<br>`:rbt` → `ruby-text`<br>`:rbtg` → `ruby-text-group`|
|`ov`<br>`ovx`<br>`ovy`|`overflow: hidden;`<br>`overflow-x: hidden;`<br>`overflow-y: hidden;`|`:v` → `visible`<br>`:h` → `hidden`<br>`:s` → `scroll`<br>`:a` → `auto`|
|`cur`|`cursor: pointer;`|`:a` → `auto`<br>`:d` → `default`<br>`:c` → `crosshair`<br>`:ha` → `hand`<br>`:he` → `help`<br>`:m` → `move`<br>`:p` → `pointer`<br>`:t` → `text`|

---

#### フレックスボックスに関するプロパティ

要素を横に並べる時などに使うプロパティです。一度に多くのプロパティを設定すことが多いので `df+jcc+aic+fxww` のようにまとめて展開すると捗ります。

|略語|展開後|値の変更|
|:--|:--|:--|
|`fx`|`flex: ;`||
|`fxb`|`flex-basis: ;`[^V-default]||
|`fxd`|`flex-direction: ;`[^V-default]|`:c` → `column`<br>`:cr` → `column-reverse`<br>`:r` → `row`<br>`:rr` → `row-reverse`|
|`fxf`|`flex-flow: ;`||
|`fxg`|`flex-grow: ;`||
|`fxsh`|`flex-shrink: ;`||
|`fxw`|`flex-wrap: ;`[^V-default]|`:n` → `nowrap`<br>`:w` → `wrap`<br>`:wr` → `wrap-reverse`[^V]|
|`jc`|`justify-content: ;`[^V-default]|`:c` → `center`<br>`:fe` → `flex-end`<br>`:fs` → `flex-start`<br>`:sa` → `space-around`<br>`:sb` → `space-between`|
|`ai`|`align-items: ;`[^V-default]|`:b` → `baseline`<br>`:c` → `center`<br>`:fe` → `flex-end`<br>`:fs` → `flex-start`<br>`:s` → `stretch`|
|`as`|`align-self: ;`[^V-default]|`:a` → `auto`<br>`:b` → `baseline`<br>`:c` → `center`<br>`:fe` → `flex-end`<br>`:fs` → `flex-start`<br>`:s` → `stretch`|
|`ord`|`order: ;`||

---

#### リストに関するプロパティ

|略語|展開後|値の変更|
|:--|:--|:--|
|`lis`|`list-style: ;`|`:n` → `none`[^V]|
|`lisp`|`list-style-position: ;`[^V-default]|`:i` → `inside`<br>`:o` → `outside`|
|`list`|`list-style-type: ;`[^V-default]|`:n` → `none`[^V]<br>`:d` → `disc`<br>`:c` → `circle`<br>`:s` → `square`<br>`:dc` → `decimal`[^V]<br>`:dclz` → `decimal-leading-zero`[^V-different]<br>`:lr` → `lower-roman`<br>`:ul` → `upper-roman`|
|`lisi`|`list-style-image: ;`|`:n` → `:none`[^V]|

---

#### 要素の境界線に関するプロパティ

`border` 関連のCSSは方向ごとに細かいプロパティが用意されていますが、Emmetではそれらに全て対応しています。
ショートハンドで展開するときは `-` や `#` (色指定の時)を使って続けて記述します。

|略語|展開後|値の変更|
|:--|:--|:--|
|`bd`|`border: ;`[^V-default]|`+` → `1px solid #000`<br>`:n` → `none`|
|`bdcl`|`border-collapse: ;`|`:c` → `collapse`<br>`:s` → `separate`|
|`bdc`|`border-color: #000;`|`:t` → `transparent`[^V]|
|`bdi`|`border-image: url();`|`:n` → `none`[^V]|
|`bds`|`border-style: ;`[^V-default]|`:n` → `none`<br>`:h` → `hidden`<br>`:dt` → `dotted`<br>`:ds` → `dashed`<br>`:s` → `solid`<br>`:db` → `double`<br>`:dtds` → `dot-dash`<br>`:dtdtds` → `dot-dot-dash`<br>`:w` → `wave`<br>`:g` → `groove`<br>`:r` → `ridge`<br>`:i` → `inset`<br>`:o` → `outset`|
|`bdw`|`border-width: ;`||
|`bdrs`|`border-radius: ;`||

方向別の略語(1)
`margin` や `padding` 同様、4方向を個別に設定する略語もあります。

|プロパティ＼方向|`top`|`right`|`bottom`|`left`|
|:--|:--|:--|:--|:--|
|`border-(方向): ;`|`bdt`[^V-default]|`bdr`[^V-default]|`bdb`[^V-default]|`bdl`[^V-default]|
|`border-(方向)-color: #000;`|`bdtc`|`bdrc`|`bdbc`|`bdlc`|
|`border-(方向)-image: url();`|`bdti`|`bdri`|`bdbi`|`bdli`|
|`border-(方向)-style: ;`|`bdts`|`bdrs`|`bdbs`|`bdls`|
|`border-(方向)-width: ;`|`bdtw`|`bdrw`|`bdbw`|`bdlw`|

方向別の略語(2)
境界線のプロパティでは、上下左右の他に角を示す右上・右下・左下・左上の略語も用意されています。

|プロパティ＼方向|`top-right`|`bottom-right`|`bottom-left`|`top-left`|
|:--|:--|:--|:--|:--|
|`border-(方向)-radius: ;`|`bdtrrs`|`bdbrrs`|`bdblrs`|`bdtlrs`|
|`border-(方向)-image: url();`|`bdtri`|`bdbri`|`bdbli`|`bdtli`|

---

#### 要素の背景に関するプロパティ

|略語|展開後|値の変更|
|:--|:--|:--|
|`bg`|`background: #000;`|`+` → `#fff url() 0 0 no-repeat`<br>`:n` → `none`|
|`bgc`|`background-color: #fff;`|`:t` → `transparent`|
|`bgi`|`background-image: url();`|`:n` → `none`|
|`bgr`|`background-repeat: ;`|`:n` → `no-repeat`<br>`:x` → `repeat-x`<br>`:y` → `repeat-y`<br>`:sp` → `space`<br>`:rd` → `round`|
|`bgp`<br>`bgpx`<br>`bgpy`|`background-position: 0 0;`<br>`background-position-x: ;`<br>`background-position-y: ;`|
|`bgsz`|`background-size: ;`|`:a` → `auto`<br>`:ct` → `contain`<br>`:cv` → `cover`|

---

#### テキストに関するプロパティ

公式ドキュメントでは、なぜか `lts-n` だけ `-` が使われています。

|略語|展開後|値の変更|
|:--|:--|:--|
|`ta`|`text-align: left;`|`:l` → `left`<br>`:c` → `center`<br>`:r` → `right`<br>`:j` → `justify`|
|`va`|`vertical-align: top;`|`:sup` → `super`<br>`:t` → `top`<br>`:tt` → `text-top`<br>`:m` → `middle`<br>`:bl` → `baseline`<br>`:b` → `bottom`<br>`:tb` → `text-bottom`<br>`:sub` → `sub`|
|`td`|`text-decoration: none;`|`:n` → `none`<br>`:u` → `underline`<br>`:o` → `overline`<br>`:l` → `line-through`|
|`lh`|`line-height: ;`||
|`lts`|`letter-spacing: ;`[^V-default]|`-n` → `normal`|
|`tt`|`text-transform: uppercase;`|`:n` → `none`<br>`:c` → `capitalize`<br>`:u` → `uppercase`<br>`:l` → `lowercase`|
|`whs`|`white-space: ;`[^V-default]|`:n` → `normal`<br>`:p` → `pre`<br>`:nw` → `nowrap`<br>`:pw` → `pre-wrap`<br>`:pl` → `pre-line`|

---

#### フォントに関するプロパティ

|略語|展開後|値の変更|
|:--|:--|:--|
|`f`|`font: ;`[^V-default]|`+` → `1em Arial,sans-serif`[^V]|
|`fz`|`font-size: ;`||
|`fw`|`font-weight: ;`[^V-default]|`:n` → `normal`<br>`:b` → `bold`<br>`:br` → `bolder`<br>`:lr` → `lighter`|
|`fs`|`font-style: italic;`|`:i` → `italic`<br>`:n` → `normal`<br>`:o` → `oblique`|
|`ff`|`font-family: ;`[^V-default]|`:s` → `serif`<br>`:ss` → `sans-serif`<br>`:c` → `cursive`<br>`:f` → `fantasy`<br>`:m` → `monospace`<br>`:a` → `Arial, "Helvetica Neue", Helvetica, sans-serif;`[^V-different]<br>`:t` → `"Times New Roman", Times, Baskerville, Georgia, serif;`[^V]<br>`:v` → `Verdana, Geneva, sans-serif`[^V]|

---

#### 色指定に関するプロパティ

色の値を一度に展開できるのは16進数コード(1、2、3、6桁)のみです。それ以外の形式の値は展開後に入力しましょう。

|略語|展開後|値の変更|
|:--|:--|:--|
|`c`|`color: #000;`|`:r` → `rgb(0, 0, 0);`[^V]<br>`:ra` → `rgba(0, 0, 0, .5);`[^V]|
|`op`|`opacity: ;`||

---

#### 要素の変化に関するプロパティ

展開後に関数部分の括弧内にデフォルトで文字列が入るので、書き換えましょう。

|略語|展開後|値の変更|
|:--|:--|:--|
|`trf`|`transform: ;`|`:r` → `rotate(angle)`<br>`:rx` → `rotateX(angle)`<br>`:ry` → ` rotateY(angle)`<br>`:rz` → `rotateZ(angle)`<br>`:sc` → `scale(x, y)`<br>`:sc3` → `scale3d(x, y, z)`[^V]<br>`:scx` → `scaleX(x)`<br>`:scy` → `scaleY(y)`<br>`:scz` → `scaleZ(z)`<br>`:skx` → `skewX(angle)`<br>`:sky` → `skewY(angle)`<br>`:t` → `translate(x, y)`<br>`:t3` → `translate3d(tx, ty, tz)`[^V]<br>`:tx` → `translateX(x)`<br>`:ty` → `translateY(y)`<br>`:tz` → `translateZ(z)`|
|`trfs`|`transform-origin: ;`||
|`trs`|`transition: prop time;`||
|`trsde`|`transition-delay: time;`||
|`trsdu`|`transition-duration: time;`||
|`trsp`|`transition-property: prop;`||
|`trstf`|`transition-timing-function: tfunc;`[^V]||

---

#### 要素のアニメーションに関するプロパティ

|略語|展開後|値の変更|
|:--|:--|:--|
|`anim`|`animation: ;`[^V-default]|`-` → `animation:name duration timing-function delay iteration-count direction fill-mode`|
|`animdel`|`animation-delay: time;`||
|`animdir`|`animation-direction: normal;`|`:a` → `alternate`<br>`:ar` → `alternate-reverse`[^V]<br>`:n` → `normal`<br>`:r` → `reverse`|
|`animdur`|`animation-duration: 0s;`||
|`animfm`|`animation-fill-mode: both;`|`:b` → `backwards`[^V]<br>`:bh` → `both`<br>`:bt` → `both`<br>`:f` → `forwards`|

---

#### 主に擬似要素などで使うプロパティ

`::before` や `::after` には必須のプロパティです。文字列や `url()` を一度に展開することはできなさそうです。

|略語|展開後|値の変更|
|:--|:--|:--|
|`ct`<br>`cnt`|`content: ;`[^V-default]<br>`content: '';`|`:n` → `normal`<br>`:oq` → `open-quote`<br>`:noq` → `no-open-quote`<br>`:cq` → `close-quote`<br>`:ncq` → `no-close-quote`<br>`:a` → `attr()`<br>`:c` → `counter()`<br>`:cs` → `counters()`[^V]|

---

#### CSSで使うその他の略語

アニメーション設定、フォント読み込みなどの特殊なプロパティやコメントを記述するときに使えるものです。

|略語|展開後|値の変更|
|:--|:--|:--|
|`!`|`!important`||
|`@i`<br>`@import`|`@import url();`|||
|`@m`<br>`@media`|`@media screen {`<br>` `<br>`}`||
|`@kf`|`@-webkit-keyframes identifier {`<br>`　　from {  }`<br>`　　to {  }`<br>`}`<br>`@-o-keyframes identifier {`<br>`　　from {  }`<br>`　　to {  }`<br>`}`<br>`@-moz-keyframes identifier {`<br>`　　from {  }`<br>`　　to {  }`<br>`}`<br>`@keyframes identifier {`<br>`　　from {  }`<br>`　　to {  }`<br>`}`[^V-different]||
|`@f`|`@font-face {`<br>`　　font-family:;`<br>`　　src:url();`<br>`}`|`+` → <br>`@font-face {`<br>`　　font-family: 'FontName';`<br>`　　src: url('FileName.eot');`<br>`　　src: url('FileName.eot?#iefix') format('embedded-opentype'),`<br>`　　　　url('FileName.woff') format('woff'),`<br>`　　　　url('FileName.ttf') format('truetype'),`<br>`　　　　url('FileName.svg#FontName') format('svg');`<br>`　　font-style: normal;`<br>`　　font-weight: normal;`<br>`}`[^V]|
|`cm`|`/*  */`||

---

##おわりに

---

皆さん、いかがでしたでしょうか。これをマスターすれば、頭の中に浮かんでいることをほぼ等速で書き出すことができると思います。

また、同じEmmetと言ってもHTMLとCSSでだいぶ性格が違うこともお分りいただけましたでしょうか。HTMLではタグ構造を一気に書き出すことができ、CSSでは複数のプロパティを値付きで出すことができます。HTMLではタグ構造が複雑になると略語を組み立てるために考える時間が多くなってしまうので、「無理のない範囲で」「自分がやりやすいように」使うことが大切だと思います。

ありがとうございました。

---
##脚注

[^V]: VS Codeでは動作しませんでした。
[^V-default]: VS Codeでは独自の初期値が補完されます。
[^V-different]: VS Codeでは異なる値が補完されます。