Emmetについて

## ■ はじめに

HTML,CSSのコーディング速度を格段に高めてくれるEmmetについて記事にしました。
この記事で得る内容は以下の通りです。

・Emmetの使用方法について
・Emmetを活用する事で、作業速度及び作業効率が上がる

■ 公式
・[Emmet チートシート](https://docs.emmet.io/cheat-sheet/)


## ■ HTMLでのEmmetの使い方（要素）

#### ① 要素の名前（例：div）を入力する

![スクリーンショット 2020-10-15 9.29.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/d0f3c7f7-7eb7-84b2-ff27-b5f658ba9c5c.png)

#### ② TabキーかEnterキーを入力する（以降の手順でこの記述を省略します）

![スクリーンショット 2020-10-15 9.31.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/cd1e2a9d-a19e-3a08-fe7c-0c71a43c022a.png)

自動でdiv要素を生成してくれます。
他に、a要素の場合は、href属性を、img要素でしたらsrc属性とalt属性を自動で生成します。

![4b86dfa4092da00f8be3093d305b5cec.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/689c0a3c-7e1b-e3c0-a395-01444ba37cf7.gif)


## ■ HTMLでのEmmetの使い方（クラス）

例えば、p要素にtestクラスをつけて入力したい場合

![スクリーンショット 2020-10-15 9.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/d537366f-6b31-310c-9d6d-139fa9a4c92b.png)

1つずつ文字を入力しても問題ありませんが、下記の様に、`p.test`と入力すると
入力の手間が省け、打ち間違いのリスクも減少するので、とても便利です。

![ptest.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/fd81ec5b-176f-55bb-3804-19e3a9a6cb6c.gif)


#### ■ div要素の場合

div要素は多用されるので、``.test``と入力するだけでOKです。

![divの場合.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/f23496ff-5ed5-46f2-52d6-c8c85d4edf48.gif)


#### ■ 1つの要素に複数クラスをつけたい場合

div要素に2つクラスをつけて入力したい場合は、下記の様に``.text.test``と入力すると
text,testクラスが生成されます。

![複数クラス.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/0da5e29f-02c4-061c-0d92-a784611dba2b.gif)


#### ■ 兄弟要素を複数作りたい場合

div要素とa要素を兄弟要素としてまとめて作りたい場合は、``.+a``と入力すると
同じ兄弟要素としてdivとaが作られます。

![ブラザーをまとめて.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/1c8cb83e-0a46-1ad0-ce7a-16ea0eeb9ce8.gif)


#### ■ 親子要素を複数作る場合

ul要素とli要素を親子要素として作りたい場合は、``ul>li``と入力すると
ulが親要素、liが子要素として作られます。

![親子関係を作ろうぜ！.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/006f8e25-45fe-fa53-6f4a-0b1202b607d2.gif)


#### ■ 子要素を複数作りたい場合

上記の親子要素の例で、li要素を3つ作る場合は、``ul>li*3``と入力すると
``li*``の後に数字を指定した分だけ、li要素をまとめて作ることができます。

![スクリーンショット 2020-10-15 10.56.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/f582fb8a-6dc9-8f9d-2f32-e69601afd269.png)


## ■ CSSでのEmmetの使い方


#### ■ 変換候補の最適化

例えば、下記の場合で``font-size``を指定したいのですが、このままだと
``font-style: italic``が指定されてしまいます。

![スクリーンショット 2020-10-15 11.24.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/afaccee4-bba0-5bd2-d58c-762b5153f568.png)

ここでは``fz``と入力することで``font-size``を指定することができます。

![スクリーンショット 2020-10-15 11.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/73558768-f6be-d7cb-8bdc-89f4db09d9ab.png)


#### ■ 値を同時に指定したい場合

上記の例で、``font-size``の値をEmmetで同時に指定することもできます。
例えば、``font-size: 20px;``に指定する場合は、``fz20``と入力します。

![フォントサイズを同時にしてい.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/42ede9f2-abb6-31fe-229f-5552096132ef.gif)


#### ■ スペース区切りの指定をする場合

・例① ``margin: 0 auto;``の様に、途中で数字と英単語が区切られている場合でも
``m0:a``と入力することで、素早く変換できます。

![スペース区切りも楽勝だぜ！.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/fe85acf6-ab74-89db-273f-1c41db90bee6.gif)

・例② ``padding: 20px 10px;``を指定する場合

![例２.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/3a999a1d-ad72-6ef9-a125-f4aeabd08a80.gif)