emmet

Web制作の基本はHTMLコーディングですが、実は一番HTMLを書くのが一番面倒だったりします。

タグを書いて閉じタグ書くのもまあまあな手間ですよね。

私はMacアプリのCodaを使用していたのですが、仕事ではWindowsを使うことが多いのでnotepad++かSublime Textを使いますが、Sublime Text 2では閉じタグの補完がないので困っていました。

これでは作業効率が上がらない・・コーディングが遅いと思われてしまうじゃないか！！と思ったときに、「なんかそういう為の拡張機能あったな。」とふと思い、ググって使ってみることにしました。

それは、Emmet（エメット）というプラグインです。

Emmetって？

Emmet – the essential toolkit for web-developers

Emmetは、主にHTMLやCSSの記述をサポートする色々なエディタで使用することができるプラグインです。

短くタグを記述し、ショートカットで変換するという機能を備えています。

前は「Zen-Coding」という名だったみたいです。

Macアプリでショートカットを打つだけで指定文を入力することができるText Expanderというものがありますが、それと使用感は同じようなものだと思います。

使い方

HTML5のテンプレートも一瞬で書ける

!

と打ってから割り当てたショートカットで変換すると・・

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

一瞬でHTML5のテンプレートを用意することができます。

※ショートカットはctrl+E（Macはcmd+E）が基本ですが、エディタにもよるので要確認。

タグ編

div

変換すると・・

<div></div>

なんと、タグ一式に変換してくれるんです！！

article、sectionはもちろん、pやインライン要素のspan、smallなど、なんでも変換してくれます。

クラスを付けてみる

.class

で拡張すると、

<div class="class"></div>

のようにクラスもつけて変換してくれるんです！！

これを使ってみたときは「早く使えばよかった。」と後悔しました。。

.mainとすれば、mainクラスがついたdivに変換してくれます。

さらに、span.blueと指定すれば他のタグにもクラスをつけることができます！

階層をつけてみる

section>article

<section>
	<article>
	</article>
</section>

タグの階層がある構成のコーディングも超楽ちんに。

タグ数を指定する

例えば三つのリストを使う場面でEmmetを使ってみるとします。

ul>li*3

と変換すると、

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

これだけでリストを打たなくても複数のリストが書けてしまうんです！

さらにEmmetを極めるには？

Cheat Sheet

Emmetのチートシートが用意されているので学習することができます。

でも多すぎるので気が向いたときに覚えればいいと思います（笑）

CSSにEmmetを使う

EmmetはCSSにも使用できます。

d
pos
c

これをひとつずつ変換すると、

display:block;
position:relative;
color:#000;

と、CSSもかなり楽をして書くことができてしまいます。

使えるエディタ等

現在、個人的に確認がとれたものだけを紹介します。

大体の場合はプラグインという形でインストールすることでEmmetを使用できるようになります。

しかもタダ！！！

エディタにプラグインをインストールする機能があればダウンロードしてこなくても一発で使えると思います。

まとめ

こういったプラグインは、知ってるけど「なんかめんどくさそうだからいいや。」状態の人は意外といるのではないでしょうか。

でも、それは大きな損失です。

「Emmetだけはいれとけ。」

そう言ってあげたいぐらい、素晴らしくコーディングが捗るWeb製作者にとっては神様のようなプラグインだと思いました。

MacではCodaに、Windows環境ではAtomとSublime Text 2に入れて使っています。

Web制作者のためのSublime Textの教科書