Atom講座

Emmetの使い方

Emmet概要

EmmetはHTMLやCSSのコーディングをサポートするプラグインです。
Emmetを導入することにより、独自の省略記法でHTMLタグを展開したり、用意されたテンプレートを簡単に呼び出すことができるようになります。

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

Emmetはプラグインとして提供されているので、下記方法でインストールします。

emmet_install

  1. [Ctrl] + [,] で設定画面を開き、左メニューの「+インストール」をクリックして「パッケージのインストール」画面を開きます。
  2. テキストボックスに emmet と入力し[パッケージ]ボタンをクリックします。
  3. 検索結果に表示されたパッケージ、テーマから目当てのものを[インストール]ボタンを押してインストールします。

Emmetの使い方

EmmetはHTMLとCSSをサポートしますが、ここではHTMLの記述方法を紹介します。

省略記法の基本

Emmetの使い方は簡単で、HTMLに展開するための指示を入力したら [Tab] 、もしくは[Ctrl] + [e] を押すだけです。
例えば、下記の様に記述して、[Tab]、もしくは [Ctrl] + [e] を押すとHTMLが展開されます。

nav>ul>li*5

展開後のHTMLは下記になります。

<nav>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</nav>

Emmetのドキュメントサイトでデモが見られます。

emmet_demo

[Play demo]、もしくは[Watch demo]でデモの視聴、[Try it yourself]で実際に入力して試すことができます。

様々な省略記法の紹介

Emmetに用意された省略記法の中からよく使うものを一覧にしました。
これらの記述方法は下段にて紹介します。

記法 概要
要素 要素の指定 div
要素>要素 ネストを作成 .header>h1>a
要素+要素 同階層に要素を作成 div>h1+p
要素+ 子要素を含めて作成 ul+
要素*n 要素の複製 ul>li*4>a
要素#id ID名の指定 nav#menu
要素.class クラス名の指定 div.box
要素[attr] 属性の指定 textarea[cols=20 rows=4]
{text} テキストを挿入 h1{タイトル}

> でネストを作成

> を使ってULの中にLIを作成するといったネストが簡単に作成できます。

ul>li

展開後は下記のとおりです。

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

+ で同階層に要素を作成

同階層に複数の要素を追加したい場合、下記のように記載します。

div>h1+p

展開後は下記のとおりです。

<div>
	<h1></h1>
	<p></p>
</div>

子要素を含めて作成

UL、SELECTなど子要素がある要素は + で子要素付きで作成することができます。

ul+
dl+
select+
table+

展開後は下記のとおりです。

<ul>
	<li></li>
</ul>
<dl>
	<dt></dt>
	<dd></dd>
</dl>
<select name="" id="">
	<option value=""></option>
</select>
<table>
	<tr>
		<td></td>
	</tr>
</table>

* で要素の複製

LIのように複数展開させたい要素がある場合、アスタリスク(*)を使って好きな数だけ展開させることができます。

ul>li*3

展開後は下記のとおりです。

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

#id .classでID名とクラス名を指定

要素にIDやクラス名を指定したい場合、# や . を使って名前を指定できます。
要素名を省略した場合、デフォルトでDIVが使われます。

#box>p.catch

展開後は下記のとおりです。

<div id="box">
	<p class="catch"></p>
</div>

[attr=value]で属性の指定

[attr=value]で属性を追加できます。複数の属性を指定する際は空白で区切ってください。

textarea[cols=20 rows=4]

展開後は下記のとおりです。

<textarea name="" id="" cols="20" rows="4"></textarea>

{テキスト}でテキストを挿入

プレーンなテキストを追加したい際はその文字列を{}で囲みます。

h1{タイトル}

展開後は下記のとおりです。

<h1>タイトル</h1>

Emmetで使える短縮タグ一覧

Emmetでは便利な短縮タグがいくつか用意されています。
チートシートも用意されているので、参考にしてください。

Emmetのタグ一覧

関連記事