コーディングの面倒を軽減！Emmetを使おう（前編）

2014年 5月 15日

Emmetとは？

Emmetは各種テキストエディタやIDEにインストールして使用するプラグインです。

Emmetを使用することで、HTMLとCSSのコーディングにおいての面倒を軽減することができ、早くて快適な製作環境を手に入れることができます。

ZenCodingという同様のプラグインがありますが、ZenCodingのプロジェクトはEmmetに引き継がれています。
つまり、EmmetはZenCodingの後継プラグインということですね。

Emmetが使えるテキストエディタ

2013年5月現在、Emmetが対応しているテキストエディタ・IDEは次の通りです。

クロスプラットフォーム（複数OS用）

  • Sublime Text
  • Eclipse/Aptana
  • Komodo Edit
  • textarea
  • CodeMirror
  • Brackets
  • NetBeans
  • Adobe Dreamweaver(WindowsとMac OSXのみ)

Mac OSX用

  • TextMate
  • Coda
  • Espresso
  • Chocolat

Windows用

  • Notepad++
  • PSPad

この他にもJSFiddleなどのブラウザ上で動作するものでも使えたり、Vimなどに対応したサード・パーティー製のプラグインも公開されています。

正確な一覧はEmmetのダウンロードページを確認してください。

インストール方法

Emmetのインストール方法は、テキストエディタによってそれぞれ異なります。
（Emmetはテキストエディタのプラグインですので、それぞれのエディタのプラグイン追加ルールに従う必要があるわけです）

まず、先ほどのダウンロードページの一覧からエディタを選んだら、GitHubなど外部のサイトへ飛びます。

説明などが英語で書かれているので、英語に不慣れな方のためにDreamweaverとSublimeTextでのインストール方法を記述しておきます。
（本当はCodaも書いておきたいんですが、Coda持ってないので……）

Dreamweaver

まずはDreamweaver用EmmetのGitHubページから、「Installation」という見出しの部分の本文内にある「Emmet.zxp」をクリックしてzxpファイルをダウンロードします。

次にAdobe Extension Managerを起動します。このとき、もしDreamweaverが起動中であったら終了しておきます。 （Extension Managerがインストールされていない場合は、AdobeのサイトやCreativeCloudからダウンロードしてインストールしてください）

Extension Managerの画面左側からDreamweaverを選択し、右上の「インストール」をクリックして先ほどダウンロードしたEmmet.zxpファイルを選択します。

Dreamweaverを起動して、メニューの「コマンド」内にEmmetが追加されているか確認します。

Emmetは英語版Dreamweaverを想定して開発されているので、日本語版Dreamweaverの標準キーボードショートカットと重複する場合があります。
そのため、環境設定のキーボードショートカットを編集しておくとよいでしょう。

SublimeText

「Package Control」機能を使用します。

「Package Control」をSublimeTextにインストールしていない場合は、次の手順でインストールしておいてください。

Package Controlのインストール

メニューの「View」から「Show Console」をクリックし、コンソールを表示。

Package ControlのINSTALLATIONに書かれたソースコードをコピーして、先ほど表示させたコンソール内にペーストしてEnter。

無事完了したら、引き続きEmmetをインストールしていきます。

Emmetのインストール

ここからはEmmetのインストール手順です。

メニューの「Preferences」内（Mac版はりんごマークをクリックするとPreferenceがあります）に「Package Control」が追加されているのでクリック。

「Package Control: Install Package」を探してクリックすると、しばらくしてから小ウィンドウが表示されるので、上の検索窓に「Emmet」と入力。

検索結果の中からEmmetを選んでクリックしたらインストールが完了するまでしばらく待ちます。

Emmetの使い方

HTMLをEmmetで書く

まずはエディタ内に次のように記述してみてください。

html:5

書けたらそのまま、Dreamweaverではメニューの「コマンド > Emmet > Expand Abbreviation」をクリックしてください。SublimeTextではCtrl+Eです。

今回はメニューからマウスで選択していますが、Dreamweaverでもキーボードショートカットを設定すればSublimeText同様にCtrl+EやCtrl+,などで展開することができるようになります。

次のようなHTMLソースが展開されたら成功です。
（エディタによって細かい部分で違いがあるかもしれませんが）

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

続いて、<body>要素の中に次のように記述して、展開してみましょう。

table#sample>tr*4>th.title$+td.text$

この記述では、次のような<table>のHTMLソースが展開されます。

<table id="sample">
  <tr>
    <th class="title1"></th>
    <td class="text1"></td>
  </tr>
  <tr>
    <th class="title2"></th>
    <td class="text2"></td>
  </tr>
  <tr>
    <th class="title3"></th>
    <td class="text3"></td>
  </tr>
  <tr>
    <th class="title4"></th>
    <td class="text4"></td>
  </tr>
</table>

これまで面倒だった要素のコピー＆ペーストの手間がなくなり、さらにクラス名などに連番をつける場合にも書き換えの手間がなくなりました。

今回使用した記号の意味

記号意味

| 子要素

  • | 兄弟要素

. | class # | id
* | 出力する数 $ | 連番

サンプルコードの解説

table#sample

id属性がsampleという<table>要素を展開し、

> tr*4

その中に<tr>要素を４つ、

> th.title$

<tr>の中には<th>要素を展開し、class属性にtitleとつけて末尾を連番にする。

+ td.text$

最後は先ほどの<th>の中ではなく、兄弟要素として<td>要素を展開し、class属性はtext（末尾が連番）となります。

属性やテキストを併せて出力する

HTML要素の属性や、マークアップされるテキストも併せて指定しておくことで一度に出力することができます。

a[href=sample.html]{サンプルリンク}

こう書くことで、<a>要素のhref属性とリンクテキストを一度に出力可能です。

[サンプルリンク](sample.html)

ちょっと上級編

()を使って要素をグルーピングすることができます。
次のように書いて展開してみてください。

table#sample>((tr.odd>th+td)+(tr.even>th+td))*2

グルーピングを用いることで、このようなHTMLソースもさっと書いてしまうことができます。

<table id="sample">
  <tr class="odd">
    <th></th>
    <td></td>
  </tr>
  <tr class="even">
    <th></th>
    <td></td>
  </tr>
  <tr class="odd">
    <th></th>
    <td></td>
  </tr>
  <tr class="even">
    <th></th>
    <td></td>
  </tr>
</table>

(tr.odd>th+td)のグループと(tr.even>th+td)のグループは兄弟グループとなり、(tr.odd>th+td)+(tr.even>th+td)を展開すると次のようになります。

<tr class="odd">
  <th></th>
  <td></td>
</tr>
<tr class="even">
  <th></th>
  <td></td>
</tr>

さらにこの２つのグループを()で囲むことで１つのグループとし、そのグループが*2となるため、((tr.odd>th+td)+(tr.even>th+td))*2を展開すると次のようになるわけです。

<tr class="odd">
  <th></th>
  <td></td>
</tr>
<tr class="even">
  <th></th>
  <td></td>
</tr>
<tr class="odd">
  <th></th>
  <td></td>
</tr>
<tr class="even">
  <th></th>
  <td></td>
</tr>

CSSをEmmetで書く

次に<head>要素内に、次のように書いて展開してみてください。

style

これで<style>要素が出力されます。引き続き、<style>要素内に次のようにCSSのセレクタを書き込んでおいてください。

#sample {

}

それでは、このセレクタの範囲内に次のように書き込んで展開してみてください。

w:100+h:a+fz:90p

すると次のようなCSSが出力されます。

width: 100px;
height: auto;
font-size: 90%;

CSSを書く際は、必ずCSSファイルか<style>要素内でしか展開されないことに注意してください。

CSSの展開では、それぞれのプロパティと値を+で繋いで一気に展開することができますが、それぞれのプロパティの書き方の説明をしていきましょう。

サンプルコードの解説

w:100

これでwidth: 100pxと展開されます。
HTMLのときとは違い、プロパティ名はwなど省略した表記で指定します。

値のほうで指定した数値の後ろに何も書かない場合、単位が自動でpxになります。

h:a

height: auto;と展開されます。
値のほうが数値ではなく英文字の場合、プロパティ名と同様に省略した表記で展開します。

fz:90p

font-size: 90%と展開されます。
数値の後ろにpとすることで単位を%にしてくれます。

単位の指定方法は次の通りです。

  • px - なし または px
  • em - e または em
  • ex - x または ex
  • % - p または %

ベンダープレフィックスつきのプロパティ

プロパティによってはベンダープレフィックスを自動でつけて展開してくれるものもあります。次のように記述して展開してみてください。

bxsz:cb

box-sizingプロパティがベンダープレフィックスつきで展開されます。

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

他の要素やプロパティの書き方は？

今回解説した書き方以外の指定方法は、Emmetのチートシートを参照してください。

続きを書きました

後編で他の機能の紹介を掲載しました。