HTML/CSSを爆速コーディング Emmet入門第2回Adobe Pinch In / 制作コラム

Emmetの省略記法を使って、HTMLを素早く入力する

公開日 : 2015/03/23

Emmetの代表的な機能に、HTMLとCSSの省略記法があります。今回はCSSのセレクタのように記述できるHTMLの省略記法と、それに関連するEmmetの機能を紹介します。

Bracketsを使って解説するため、インストール方法は、前回の記事をご覧ください。

HTMLの省略記法の基本

Emmetの省略記法とは、前回の記事で紹介した「#header>h1」のような記述です。

省略記法の展開はEmmetの「Expand Abbreviation」を利用して行います。Expand Abbreviationは、定義済みのショートカットキーを使うか、キーボードの[Tab]キーでも展開できます。(Dreamweaverなど一部のエディタではTabキーが効かない場合があります)

HTMLファイルを用意して、下記のコードの行の後ろで[Tab]キーを押して展開してみてください。 CSSのセレクタのような記述が、HTMLとして展開されます。

Emmetの省略記法を用いた記述

#header>h1

Emmetにより展開されたコード

<div id="header">
  <h1></h1>
</div>

CSSのセレクタのように記述し、[Tab]キーを押すとHTMLが展開される

BracketsのEmmetには「Expand Abbreviation(interactive)」という新機能が実装されています。名前の括弧内の「interactive」という文字通り、対話的に省略記法の展開が行えます。

HTMLで入れ子が複雑なコードを記述する時に、便利な機能です。下のGIF画像は、Expand Abbreviation(interactive)の機能を使ったデモです。

Expand Abbreviation(interactive)を利用すると、リアルタイムに省略記法が展開される

HTMLの省略記法のルール

省略記法にはHTMLを柔軟に記述するための、いくつかのルールが用意されています。まずは表の一覧をご覧ください。これらの記述方法を解説していきます。

記法	概要	例
E	要素の指定	div
E#id	IDの指定	h1#logo
E.class	classの指定	h1.logo
E[attr]	属性の指定	img[src="pic.png" width="80"]
E>e	階層を下げる	.header>h1>a
E>e^p	階層を上げる	#id>h1>a^ul.nav
E+E	隣接する要素	.alpha+.beta
E+	一部の要素で子要素を展開	table+
E*n	要素の複製	ul>li*4>a
$*n	連番	ol>li.step$*3
{text}	テキストを挿入	p{text}
E\|filter	フィルター機能	#demo｜c
lorem	ダミーテキストの生成	lorem8

要素の指定 - E

要素名を記述するだけでHTMLが展開され、一部の要素は属性も付与されます。またinput要素は「-」か「:」で要素に続けてtype属性を指定すると、その属性値も展開します。

Emmetの省略記法を用いた記述

div
article
a
input-c
input-tel

Emmetにより展開されたコード

<div></div>
<article></article>
<a href=""></a>
<input type="checkbox" name="" id="";>
<input type="tel" name="" id="">

IDとclassの指定 - E#id, E.class

IDとclassは、CSSのセレクタのように記述します。要素名を省略して記述すると、親の要素によってHTMLの文法に合った要素を展開します。

Emmetの省略記法を用いた記述

#header
h1#logo
a.link

<!-- 特定の親要素で展開する場合 -->
<ul>
  .item
</ul>

Emmetにより展開されたコード

<div id="header"></div>
<h1 id="logo"></h1>
<a href="" class="link"></a>

<!-- 特定の親要素で展開する場合 -->
<ul>
  <li class="item"></li>
</ul>

属性の指定 - E[attr]

属性は「[]」の中に記述したものが展開されます。

Emmet v1.1から暗黙の属性値という機能が追加されています。この機能は、linkやscriptなど特定のHTML要素において、値を記述するだけで属性が補完される機能です。

Emmetの省略記法を用いた記述

a[href="/"]
a[href="/" title="home"]
a[href="/"][title="home"]

<!-- 暗黙の属性値 -->
link[/css/style.css]
script[/js/script.js]

Emmetにより展開されたコード

<a href="/"></a>
<a href="/" title="home"></a>
<a href="/" title="home"></a>

<!-- 暗黙の属性値 -->
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>

階層の操作 - E>e^p

HTMLの要素の階層を下げる場合は「>」を記述し、階層を上げる場合は「^」を記述します。

Emmetの省略記法を用いた記述

.header>h1>a

.header>h1>a^.nav

.header>h1>a^^.main

Emmetにより展開されたコード

<div class="header">
  <h1><a href=""></a></h1>
</div>

<div class="header">
  <h1><a href=""></a></h1>
<div class="nav"></div>
</div>

<div class="header">
  <h1><a href=""></a></h1>
</div>
<div class="main"></div>

隣接する要素 - E+E

CSSのセレクタのように「+」で要素をつなげると、要素を隣接させた状態で展開されます。

Emmetの省略記法を用いた記述

.left+.right

.header>h1+.nav

Emmetにより展開されたコード

<div class="left"></div>
<div class="right"></div>

<div class="header">
  <h1></h1>
  <div class="nav"></div>
</div>

子要素を展開　- E+

上記で「+」の利用方法を紹介しましたが、「+」にはもう一つの使い方があります。ulやol, table要素など、必ず特定の子要素くる場合は「+」を利用すると、親と子が同時に展開されます。

Emmetの省略記法を用いた記述

dl+

table+

ul++p

Emmetにより展開されたコード

<dl>
  <dt></dt>
  <dd></dd>
</dl>

<table>
  <tr>
    <td></td>
  </tr>
</table>

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

要素の複製 - E*n

同じ要素を複製して記述したい時は「*」を利用します。「*」の後ろに数値を指定することで、その数だけで要素の複製が行えます。

Emmetの省略記法を用いた記述

ul>li*3>a

ul>li>a*3

Emmetにより展開されたコード

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

<ul>
  <li>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
  </li>
</ul>

また「()」を使って省略記法をグループ化して要素を増やす方法もあるので、こちらも覚えておきましょう。

Emmetの省略記法を用いた記述

(.box>h2+p>span)*2+.footer

Emmetにより展開されたコード

<div class="box">
  <h2></h2>
  <p><span></span></p>
</div>
<div class="box">
  <h2></h2>
  <p><span></span></p>
</div>
<div class="footer"></div>

連番 - $*n

要素の複製時に「$」を併用すると、連番が利用できます。「$」の数によって桁数を指定できます。

Emmetの省略記法を用いた記述

ol>.step-$*3>a

img[src="pic$$$.png"]*3

Emmetにより展開されたコード

<ol>
  <li class="step-1"><a href=""></a></li>
  <li class="step-2"><a href=""></a></li>
  <li class="step-3"><a href=""></a></li>
</ol>

<img src="pic001.png" alt="">
<img src="pic002.png" alt="">
<img src="pic003.png" alt="">

テキストを挿入 - {text}

「{}」で文言を囲むと、テキストとして展開されます。

Emmetの省略記法を用いた記述

p{text}

p>{text}

.box*2>h2{タイトル$$}+a{もっと見る}

Emmetにより展開されたコード

<p>text</p>

<p>text</p>

<div class="box">
  <h2>タイトル01</h2>
  <a href="">もっと見る</a>
</div>
<div class="box">
  <h2>タイトル02</h2>
  <a href="">もっと見る</a>
</div>

フィルター機能 - E|filter

省略記法の後ろに「|」を追加し、キーワードを入力すると、フィルターの機能を利用できます。
記述するスピードを大幅に改善するものではありませんが、覚えておくと便利な機能です。

キーワード	フィルター機能
c	Comment tags(コメント付与)
e	Escape(エンティティ化)
s	Single Line(1行で出力)
bem	BEM(BEMのルールで出力)

Emmetの省略記法を用いた記述

<!-- Comment Tags -->
#main>.entry>h1|c

<!-- Escape -->
#main>.entry>h1|e

<!-- Single Line -->
#main>.entry>h1|s

<!-- BEM -->
.block>.-element+.-element>._modifier|bem

Emmetにより展開されたコード

<!-- Comment Tags -->
<div id="main">
  <div class="entry">
   <h1></h1>
  </div>
  <!-- /.entry -->
  </div>
<!-- /#main -->

<!-- Escape -->
&lt;div id="main"&gt;
  &lt;div class="entry"&gt;
    &lt;h1&gt;&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- Single Line -->
<div id="main"><div class="entry"><h1></h1></div></div>

<!-- BEM -->
<div class="block">
  <div class="block__element"></div>
  <div class="block__element">
    <div class="block__element block__element_modifier"></div>
  </div>
</div>

ダミーテキストの生成 - lorem

「lorem」か「lipsum」を記述すると、ダミーテキストを生成できます。キーワードの後ろに数値を指定することで、ダミーテキストの長さを調整できます。

Emmetの省略記法を用いた記述

p>lorem

ul>li*3>lorem8

Emmetにより展開されたコード

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda enim debitis eveniet, nisi magni hic perspiciatis officia temporibus modi. Quos totam quia, iste praesentium sint laborum ab facilis impedit reiciendis?</p>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Quo illo ratione impedit ipsam molestiae. Dolor, necessitatibus?</li>
  <li>Esse sed ea, incidunt eaque ipsum, ratione nisi.</li>
</ul>

既存の要素の外側にHTMLを追加する

Emmetは新しくHTMLを生成するだけでなく、すでにあるHTML要素やテキストの外側に、HTMLを追加する機能もあります。囲みたい要素を選択して「Wrap With Abbreviation」という機能を選択すると入力ボックスが表示されます。そのボックスに省略記法を記述すると、リアルタイムで外側に要素が展開されます。[Enter]キーでHTML要素の確定を行います。

ウィンドウの下に入力ボックスが表示され、リアルタイムにHTMLが反映される

また、複数行のテキストと要素の複製を行う「*」を組み合わせると、テキストの各行ごとに要素を追加できます。

この方法はリストを作成する時などで、非常に便利な機能です。

複数行テキストを選択し、省略記法の記述時に「*」を利用すると改行位置にあわせて要素が追加される

既存の要素に属性を追加する

すでに展開されている要素にclassや属性を追加したい場合は、Emmet v1.1から追加された「Update Tag」を使います。

属性を追加した要素にカーソルを移動し、この機能を利用すると、Emmetの省略記法の書き方で素早く属性を追加できます。特にIDやclassの追加に重宝する機能です。

Update Tagは、既存の要素にIDやclassを素早く付与できる

HTMLの省略記法の対応ファイル

EmmetはHTMLメタ言語であるHaml, Jade, Slimにも対応しています。これらのメタ言語は主にインデント記法で記述していくため、わざわざEmmetを利用しなくてもいいかもしれません。しかし属性を含んでの展開や、今後この連載で紹介するHTMLの編集機能を利用すると、HTMLメタ言語のコーディングも、より快適になるでしょう。

以上で、HTMLの省略記法の紹介を終わります。省略記法はEmmetの基本となる機能なので、ぜひ習得しましょう。次回は、CSSの省略記法について紹介します。