Emmet（Zen Coding）で HTML/CSS をより速く書く

Emmet は、Zen Coding プロジェクトの名前を変えたものです。Emmet を使うと、略記法を使って HTML のリストや、クラスや ID を持つブロックをすばやく生成できます。HTML に加えて、短い構文を使って CSS プロパティもすばやく書けます。最初は新しいショートカットのセットを覚えるのが不要に思えるかもしれませんが、慣れてしまうと、Emmet なしでのコーディングは不便に感じられます。

Emmet（Zen Coding）でできること

大量の HTML を書いていると、タグの閉じ忘れのようなエラーの可能性が高まります。Emmet はそれを防ぐのに役立ちます。ほとんどの最新の IDE は、組み込みまたはサードパーティのプラグインを介して Emmet をサポートしています。HTML コード生成のためのショートカットキーを設定するだけです。

たとえば、次のように書きます:

div#content>h1+p

Emmet のトリガーキーを押すと、次のように展開されます:

<div id="content">
  <h1></h1>
  <p></p>
</div>

単純な CSS セレクターを書くと、Emmet が対応する HTML 構造を出力します。

優れた使用例は、HTML メニューの生成です。たとえば:

div#header>img.logo+ul#nav>li*4>a

次のように展開されます:

<div id="header">
  <img class="logo" src="">
  <ul id="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

* 演算子は、Emmet にいくつの要素を作成するかを伝えます。これは任意のタグで使えます。たとえば:

div.item$*3

次のように展開されます:

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

例:Emmet でメニューを生成する

div#header>ul#navigation>li.item$*>a>span
私たちについて
商品
ニュース
ブログ
お問い合わせ

これは次を生成します:

<div id="header">
  <ul id="navigation">
    <li class="item1"><a href=""><span>私たちについて</span></a></li>
    <li class="item2"><a href=""><span>商品</span></a></li>
    <li class="item3"><a href=""><span>ニュース</span></a></li>
    <li class="item4"><a href=""><span>ブログ</span></a></li>
    <li class="item5"><a href=""><span>お問い合わせ</span></a></li>
  </ul>
</div>

Emmet 構文リファレンス

• E – 要素名（div、ul など）
• E#id – ID 属性（例:<div id="">）
• E.class – class 属性
• E>N – ネストされた要素
• E+N – 兄弟要素
• E*N – N 個の要素を生成
• E$*N – 上記と同じだが自動採番されたクラス（例:li.item-$*5）

ほとんどの最新の IDE は Emmet をサポートしていますが、Notepad++ を使う場合は手動でインストールする必要があります。

Notepad++ に Emmet（Zen Coding）をインストールする

Notepad++ 用の PythonScript プラグインをダウンロードします:

http://sourceforge.net/projects/npppythonscript/files/

Emmet（Zen Coding）ライブラリを Notepad++ のディレクトリに配置します。

次に、組み込みのプラグインマネージャーを使ってインストールします:

リストで Zen Coding – Python にチェックを入れ、「Install」をクリックします:

リストにプラグインが表示されない場合、お使いの Notepad++ のバージョンがサポートしていない可能性があります。サポートしている古いバージョンをインストールするか、プラグインのサポートが更新されるのを待ってください。

使用例

Notepad++ を再起動すると、Emmet を使えます。Ctrl + Alt + Enter を押してコードを展開します。たとえば、次を生成するには:

<a href="" class="link"><span></span></a>

単に a.link>span と入力して、Ctrl + Alt + Enter を押します。