Emmet（旧 zen coding）を、できるだけ覚えずに入門するための、考え方を紹介します。
zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で
なんで面倒と思ったかというと、速さに気を取られて一文で（何行ものHTMLを一発で＝爆速を再現するため）長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。

そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。

Emmetは、gitのようにサーバーとつないだり、Sassのようにコンパイルの設定が不要です。
必要なのは、使っているエディタにemmetのプラグインをインストールするだけ。
Atomだと、Emmet plugin Atom editorとか、sublime text だとこのあたりの記事が役に立つのかな。
（Codaは一時停止されて、復活して、バッチがでて、できるようになったみたいなんですが、最近バッチへのリンクが切れているので難しいかもしれません。）


Emmetでは、命令文を一文書いて、HTMLを展開する形をとっています。
で、ほとんどのエディタに割り当てられているのが ctrl + e です。
これだけ覚えれば展開はOK。他もあるけど、とりあえずはこれで動きます。


エディタの環境が揃って、動作を確認するときは、こういうシンプルな文をhtmlファイルに打ち込んで、文末で ctrl + e するといいです。

<div id="test"></div>

こんな風に展開されれば、正しく動作しています。

#は、cssでいうところのidですね。なので、「idがtestのdivタグを作って！」という命令に変換されています。


では、 . （cssのclass）だったらどうなるでしょうか。

<div class="test"></div>

意図したとおり、classに「test」が渡りました。
cssでのidやclass指定がそのまま使えるとを覚えておくといいかもしれません。

この指定は省略形で、div#test div.testでも同じ展開結果になります。

つまり、
「HTMLエレメント＋ CSSのClass or ID」で指示が出せるので

span#test span.test

p#test p.test

みたいに他のエレメントでも指定が可能です。


たとえば、

みたいな長い文があって
展開が

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

こうなるって言われてもよくわかんないかもしれません。

でも、先ほど説明したとおり、エレメントを指定すれば展開されるんです。
では、他にわからないのは？
> とか () とか * ですね。
この演算子たちをうまく繋げてやることができれば、emmetの基本は覚えたも同じです。


>は、子要素を指定しています。
なので、

div#test>pを展開すると

<div id="test">
  <p></p>
</div>

となります。
だいたいこの演算子でつないでいくことになります。


子要素にせず、同じ階層に置きたい場合は + を使います。

div#test+p

<div id="test"></div>
<p></p>

となります。


繰り返して同じタグを使いたいときに便利な *。

リストタグや、テーブルタグで使うことが多いですね。

ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

掛け算と足し算が混在するときは、計算式として () を使いたくなりますね。
もちろんEmmetでも用意されています。

div#test>(p>span)*5

<div id="test">
  <p><span></span></p>
  <p><span></span></p>
  <p><span></span></p>
  <p><span></span></p>
  <p><span></span></p>
</div>

div#test>(p+span)*5

<div id="test">
  <p></p>
  <span></span>
  <p></p>
  <span></span>
  <p></p>
  <span></span>
  <p></p>
  <span></span>
  <p></p>
  <span></span>
</div>

演算子でつないでる感覚、わかりましたか？
基本、Emmetでやってるのはこれだけです。他にもひとつ要素を戻る ^ や 繰り返しの際に使えるナンバリングの $ がありますが、これは、慣れてから覚えてみてください。


Emmetは、なんとなくですが、CSSやJqueryの指定の仕方に似ているなぁって思います。
コツは、書きだされるHtmlをイメージすること。
あと、いろんな組み合わせを試すこと。
何度も展開しそうな命令文は、コピーしてどこか他のtxtエディタに貼り付けておくとすこし作業が楽になりますよ。

テンプレートの指定や、ショートカットは後から覚えても大丈夫。まずは基本からちょっとずつストレスをなくしていきましょう。
もしこのあと覚えるとしたら、コメントアウトの ⌘ + / などがおすすめです。

Emmetのチートシートもご参考にどうぞ。

関連記事

• photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。 2015/10/10
• レスポンシブデザインのプレビューをするために、ブラウザの最小幅を知っておこう 2015/09/10
• 要素をタイル状に並べる軽量プラグイン「Freetile.js」 2015/08/10
• 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント 2015/08/07
• 軽量でシンプルなレスポンシブフレームワーク「Skeleton」 2015/07/27
• デザインで文化に切り込む、最近の斬新な神棚いろいろ。 2015/07/14
• SVGデータから背景画像を作れる「Plain Pattern」・・のUIがかわいい。 2015/07/01