■ はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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