HTMLを効率よく書く！Emmetの書き方・使い方まとめ

コードエディターにはHTML・CSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができるのですが、ここではさらに効率アップできるEmmetを使ってみます。

Emmetを使うとHTMLタグを記述する際に必要な< >などを省略したり、長いHTMK構造をたった数行で書くことができるようになります。慣れるとこれ以外で書くのがめんどくさくなるというデメリットがありますが、とにかく効率良く記述できるのでまだ使ってない人は是非使ってみて下さい。

EmmetにはHTMLとCSSがありますが、ここではHTMLの記述方法を紹介します。

Emmetのインストール方法

コードエディターにEmmetをインストールする

Emmetはコードエディターのプラグインをインストールすることで使用できるようになります。主要なコードエディターにはだいたい対応しているので、普段使っているエディターにもインストールできるかもしれません。

プラグインのダウンロードや対応しているエディター一覧はこちら。
Emmet Download

インストール方法などはダウンロード先に記述してあります。ここではBracketsとSublimetextにEmmetをインストールしてみます。作業は簡単なのでさくっとやってしまいましょう。

BracketsにEmmetをインストールする方法

MacでもWindowsでも使えて軽量なエディターのBracketsにEmmetをインストールしてみます。まずはBracketsを起動して、ファイル->拡張機能マネージャーを選択。

そのあと検索フォームからEmmetと入力してEmmetをインストールします。これで完了。

SublimeTextにEmmetをインストールする

次はSublimeTextにEmmetをインストールしてみます。SublimeTextを起動し、環境設定からPackage Controlを選択。

そのあとemmetと入力してでてきたプラグインをインストールします。SublimeTextを再起動すれば準備完了。

Emmetの書き方・使い方

Emmetの使い方

Emmetを使うには以下で紹介するような記述をした後、tabキーを押すことでコードを展開できます。どのキーを押すと展開するかはコードエディターによって設定が違っていたりするので、各種エディターの設定を確認して下さい。

書き方基本編

ここからはEmmetの記述方法を確認していきます。まずは簡単なところから。

div>divでネスト。

div>ul>li

<!-- 展開後 -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

div+divで同階層に展開。

div>h1+p+p

<!-- 展開後 -->
<div>
  <h1></h1>
  <p></p>
  <p></p>
</div>

div>p^pで上の階層に展開。

div>h1+p>span^ul>li

<!-- 展開後 -->
<div>
  <h1></h1>
  <p><span></span></p>
  <ul>
    <li></li>
  </ul>
</div>

ul>li*5で複数要素の展開。

ul>li*5

<!-- 展開後 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

div#id.classでidとclassを追加。

div#head+div.container>div#main+div#side^div#footer

<!-- 展開後 -->
<div id="head"></div>
<div class="container">
  <div id="main"></div>
  <div id="side"></div>
</div>
<div id="footer"></div>

応用編

次は応用編。記述も少し複雑になりますが、使ってるうちに慣れてきます。

div+(div>p)+divでグループ化。

div#head+(div.container>div#main+div#side)+div#footer

<!-- 展開後 -->
<div id="head"></div>
<div class="container">
  <div id="main"></div>
  <div id="side"></div>
</div>
<div id="footer"></div>

div#id$*3でナンバリング。

ul>li.class$*5

<!-- 展開後 -->
<ul>
  <li class="class1"></li>
  <li class="class2"></li>
  <li class="class3"></li>
  <li class="class4"></li>
  <li class="class5"></li>
</ul>

div{text}でテキストの入力。

ul>li{text$}*5

<!-- 展開後 -->
<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
</ul>

div[attr="value"]で属性の追加。

table.table>tbody>(tr>td[colspan="2"]{column})+tr>td{col$}*2

<!-- 展開後 -->
<table class="table">
  <tbody>
    <tr>
      <td colspan="2">column</td>
    </tr>
    <tr>
      <td>col1</td>
      <td>col2</td>
    </tr>
  </tbody>
</table>

Emmetで使える短縮タグ一覧

Emmetでは上記のようなタグどうしの結合以外に、展開することで使える短縮タグがあります。タグ一覧はチートシートで見ることができるのでチェックしておきましょう。

全部覚えるのは結構大変そうですが、パターンを理解すれば以外と簡単。覚えるのは以下の３つだけです。

• HTMLタグの短縮系：str , hdr , artなど（短縮しなくても展開可能）
• :で属性つける：input:text , link:cssなど
• +つけてリスト作る：ul+ , select+など

Emmetの使い方まとめ

いかがでしたか？Emmetの機能を使うことで、素早くコーディングできるようになります。ただし、ベタで書くのがめんどくさくなるのは本当なので、そのへんは自己責任ということで。

あと、Emmetにはコードの展開の他にもさまざまな機能があります。ここではHTMLのみ紹介しましたが、CSSでも使えるので興味のある方は試してみて下さい。