HTML/CSSを爆速コーディング Emmet入門 第2回 Emmetの省略記法を使って、HTMLを素早く入力する
HTML/CSSを爆速コーディング Emmet入門
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
要素名を記述するだけで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
省略記法の後ろに「|」を追加し、キーワードを入力すると、フィルターの機能を利用できます。
記述するスピードを大幅に改善するものではありませんが、覚えておくと便利な機能です。
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 -->
<div id="main">
<div class="entry">
<h1></h1>
</div>
</div>
<!-- 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の省略記法について紹介します。