連載  /  

HTML/CSSを爆速コーディング Emmet入門 第2回 Emmetの省略記法を使って、HTMLを素早く入力する

BY 公開

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="https://blogsimages.adobe.com/css/style.css">
<script src="https://blogsimages.adobe.com/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の省略記法について紹介します。

  AUTHOR

久保 知己

株式会社まぼろし / マークアップエンジニア / 1985年生まれ。HTML/CSSからCMSの構築まで、様々なサイトの制作に携わり、2014年にまぼろしに入社。著書に「CSS3&jQueryで作る スマートフォンサイトUI図鑑 」(アスキー・メディアワークス/共著)、「プロとして恥ずかしくない 新・WEBデザインの大原則」(MdN/共著)などがある。