Emmetとは、HTMLやCSSのコーディングを楽にしてくれるプラグインのこと。
コードを自動で補完してくれるので、これを使えばコーディングのスピードが簡単に上がり、効率よく作業することができます。
HTMLやCSSの基礎がわかっている方ならインストールした瞬間から簡単に使いこなせますので、インストールしてないという方はこれを機にインストールしてみてください。
Emmetについて
Emmetとは？
Emmetとは、Brackets、Atom、Sublime TextといったHTMLエディタのプラグイン（機能拡張）として配布されているもので、もちろん無料です。
Emmetのコードを入力してショートカットキーを押せば、そのコードに対応したHTMLやCSSが一発で展開されます。このあたりは、いちいち読むよりも実際に使ってみた方が簡単に覚えられると思います。
まあ、そのくらい簡単ってことです。
Emmetをインストールする方法
代表的なHTMLエディタである、Brackets、Atom、Sublime Textの3つのエディタでインストール方法を紹介します。
Brackets
「ファイル > 機能拡張マネージャー」を選ぶか、右端にある上から2番目のアイコンをクリックするかで、プラグインパネルが開きます。プラグインパネルが開いたら、「Emmet」と名前で検索してインストールすればOK。
Atom
英語版だと「Prefereces... > Install」、日本語版だと「環境設定 > インストール」を選択後、「Emmet」と名前を入力してインストールしましょう。
Sublime Text
「Prefereces > Package Control > Install Package」を選択。「Emmet」と入力して、表示されたもの（Emmet for Sublime Textというヤツ）をクリックすればインストール完了です。
Emmetの使い方
使い方は簡単です。コードを入力し、入力したコードの末尾にカーソルを合わせた状態でTabキーを押します（Tabキーを押すことを展開と呼びます）。これは、Brackets、Atom、Sublime Textの3つのエディタで共通です。
▼展開前
▼展開後
Emmetコードの記述方法
基本編
まずはEmmetコードの記述方法を覚えましょう。
Emmetコードでは>や+が基本となります。>や+の前後にスペースは入れませんので注意してください。
最初は難しく感じますが、実は単純なので、ひとたび理解してしまえば簡単に使えるようになります。
子要素を指定する
div>p
divの中にpを入れ子にします。
兄弟要素を指定する
h1+p
兄弟要素は+で表します。要は、並列関係ってことです。
親要素に戻る
h1+div>p>span^ul>li
^が親要素に戻ることを表します。この場合は、ulが親要素divに戻りますので、pとulが並列関係になります。
グループ化する
div>(div>ul>li>a)+div>p
( )内がグループであることを表します。( )があるのとないのとでは、大きく意味が変わるので注意してください。
div>div>ul>li>a+div>p
ちなみに、( )がないとこうなります。
繰り返し
ul>li*5
liを5回繰り返したい時は*を使います。
テキストを挿入する
a{テキスト}
ID名を付与する
div#header
divのID名がheaderとなります。
クラス名を付与する
p.title
pのクラス名がtitleとなります。
ナンバリングする
ul>li.item$*5
これはクラス名が連番になります。$の部分が1〜5の数字になるってことです。
a{テキスト$}*5
こっちには、テキストの末尾に1〜5の数字が付与されます。
属性を指定する
td[rowspan=2 colspan=3]
属性の指定ははそこまで便利っていうわけではないんですが（rowspanなどの表記を省略できないので）、一応基本なので掲載します。
HTML編
HTML5のdoctypeを入力する
html:5
langがenと英語になるので、ここは手動でjaと書き換えましょう。
HTML 4.01のdoctypeを入力する
html:4t
最近はHTML 4.01を使うことはだいぶ減りましたが、念のために。
XHTML transitionalのdoctypeを入力する
html:xt
XHTMLの場合は、strict、transitional、framesetとありましたが、最も汎用性が高いのはtransitionalでしょう。というわけでtransitional形式を挙げておきます。
aタグを入力する
a
brタグを入力する
br
linkタグを入力する
link
imgタグを入力する
img
bqタグを入力する
bq
ulタグを入力する
ul>liまたはul+
ul+と入力すれば、ul>liと同じ意味になります。
olタグを入力する
ol>liまたはol+
dlタグを入力する
dl>dt+ddまたはdl+
tableタグを入力する
table>tr>tdまたはtable+
selectタグを入力する
select>optionまたはselect+
CSS編
Emmetが最も真価を発揮するのが、CSSの記述です。
正直、HTMLの記述に関しては、ちょっと効率がよくなる程度で、そこまで「爆速」とはなりません。
しかし、CSSは違います。CSSの記述コードを最初に少し覚える必要がありますが、Emmetを有効活用することで、コーディングのスピードを相当に上げることが可能になります。
marginを指定する
mt10
m10-10-10-10
paddingを指定する
pt10
p10-10-10-10
widthを指定する
w10
w100%
textを指定する
ta:l
ta:c
ta:r
lh
colorを指定する
c
op
backgroundを指定する
bg
bg+
displayを指定する
d:n
d:ib
overflowを指定する
ov:h
ov:s
positionを指定する
pos:a
pos:r
t10
r10
b10
l10
floatを指定する
fl:l
fl:r
fontを指定する
fw:n
fw:b
fz
borderを指定する
bd:n
bdl+
bdrs
ベンダープレフィックスを指定する
-dbrs
-bx
!importantを指定する
!
具体的なCSSの記述方法
w960+m10e+p10r
+でつなげて記述します。また、単位は末尾にeとつければem、rとつければremになります。
Emmetでコーディング・スピードを10倍早くする方法
コーディングのスピードをあげるには、HTMLやCSSの手打ち入力やコピペ入力を極力避けることが大切です。
Emmetコードを入力し、HTMLを展開してからHTMLの記述ミスに気づくことって結構ありますが、そのときは展開されたHTMLを修正するのではなく、元のEmmetコードを修正してHTMLを再展開した方が結果的に早くなります。
ですので、Emmetコードは展開する前に元のコードを残すようにしましょう。それだけで、相当に作業効率を上げることができます。
あとがき
今回は、使用頻度が高いと思われるEmmetコードを中心にまとめてみました。
Emmetコードをもっと知りたいという方は以下にあるEmmetのcheat-sheetを参考にしてください。