Emmetとは何か

EmmetはHTMLの記述を簡単かつ高速に記述するためのプラグイン
の一つ。
Emmetは独立した言語ではないので注意が必要。
あくまでもエディターにインストールして使うプラグインとなっています。

※Emmetは前はZenCodingという名前だったので、今から学ぶ人はEmmetを学びましょう。

Emmetを使うには

今は多数のエディターが存在するので対応している自分で使いやすいエディターを選びましょう。

使えるエディター

Brackets Download
VisualStudioCode Download
SublimeText3 Download
Atom Download
jsdo.it(ブラウザ) WebEditor
CodePen(ブラウザ) WebEditor

他にもたくさんのエディターが存在すると思いますが、私が使う機会があるのは大体上記のものくらいです。

作業環境

OS : Windows7
Editor : Brackets

Emmetを使ってみよう

私自身はBracketsを使っていますが、VisualStudioCode¹やjsdo.itとCodePenの様なブラウザ版ならデフォルトでEmmetを使えるようになっています。
エディターの設定を汚したくない方にはWeb上で扱うことが出来るjsdo.itとCodePenがオススメです。

簡単な記述方法

とにかくまずはEmmetの記述方法に触れてみましょう。
ここではBracketsを使用している前提で話をしていきたいと思います。

html

まずはhtmlを記入する欄に!とだけ記入してみましょう。
その後、キーボードのTabを一度押すとどうでしょう。
たった1文字入力しただけなのに下の文章が現れると思います。

html

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

</body>
</html>

この様にhtmlを書き始める為の準備がたった1文字で出来るようになったり、楽にhtmlの記述をしていくための記法がEmmetとなります。

Emmetの基本

上記の!もとても楽ですが、基本的に!というのは頻繁に使うものではありませんね。
次は普段htmlを記入している時に便利になる方法を学んでいきましょう。

html

div

次は頻繁に使う機会も多いと思うdivを例として使っていきましょう。
まずは上記と同じようにdivと書いてからTabを押してください。

html

<div></div>

とても簡単にdiv要素を作ることが出来ましたね。
Emmetでは要素名を記述しTabを押すだけでタグとして展開することが可能となります。
ただ、実際問題webページを作成していて要素名だけ記述して使うことはあまり多くないでしょう。
id,classを用いて記入することがほとんどだと思います。
では次にidとclassの記述方法を見ていきましょう。

html

<!-- id展開前 -->
div#hoge

<!-- id展開後 -->
<div id="hoge"></div>


<!-- class展開前 -->
div.moge

<!-- class展開後 -->
<div class="moge"></div>

自分である程度のwebページを書いたことがある人ならわかると思うのですが、ここまでのdivの記述の方法の3種類は全てCSSのセレクタの記述と同じです。
要素型セレクタ、classセレクタ、idセレクタの記述方法を用いて後はTabを叩くだけ。
それでhtmlの記述を高速化出来るので簡単ですね。

id&classのもう少し具体的な話

実際にはid + classの指定や、複数のclassの指定をする必要があると思います。
その例を見ていきましょう。

html

<!-- id+class -->
div#hoge.moge
<div id="hoge" class="moge"></div>

<!-- class複数 -->
div.moge.noge
<div class="moge noge"></div>

複数個の要素を作る方法

上記の記述の仕方では1つの要素を作る方法を記載しました。
次は複数個の要素を一度で作る方法をul liを例にして見ていきましょう。

html

ul>li

まずは上記の様に記述しTabを叩き展開してみましょう。

html

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

この様に展開をされたと思います。
※CodePen等を使っているとulのみで展開をした時の動作が違うので注意。

ただul要素の中に1つだけのli要素を使う機会は少ないでしょう。
では次にはli要素を5つ作ってみたいと思います。

html

<!-- 展開前 -->
ul>li*5

<!-- 展開後 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

今までの記述方法はul>liだったところにul>li*5とli要素の数を指定したやることで展開されるかずが変わります。
これに関してはli要素だけではなく、全ての要素で展開をしていくことが可能になるので幅広く使っていくことが出来ます。

様々な展開方法

Emmetの操作方法はとてもたくさんあるのでざっと記述方法と展開後を書いていきたいと思います。

html

<!--************************************
まずは要素型セレクタの記述で
属性も展開されるもの
*************************************-->
<!-- [a]要素 展開前 -->
a
<!-- 展開後 -->
<a href=""></a>

<!-- [img]要素 展開前 -->
img
<!-- 展開後 -->
<img src="" alt="">

<!--************************************
属性を指定して展開するもの
*************************************-->
<!-- [属性を指定のみ] 展開前 -->
table[width]
<!-- 展開後 -->
<table width=""></table>

<!-- [属性&値の指定] 展開前 -->
table[width="500px"]
<!-- 展開後 -->
<table width="500px"></table>

<!-- [属性&値の指定+属性の指定のみ] 展開前 -->
table[width="500px" height]
<!-- 展開後 -->
<table width="500px" height=""></table>


<!--************************************
様々な展開方法
*************************************-->
<!-- [要素の入れ子] 展開前 -->
div>ul>li
<!-- 展開後 -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

<!-- [良くある要素(子要素)] 展開前 -->
ul+
<!-- 展開後 -->
<ul>
  <li></li>
</ul>

<!-- [良くある要素(子要素)] 展開前 -->
ol+
<!-- 展開後 -->
<ol>
  <li></li>
</ol>

<!-- [良くある要素(子要素)] 展開前 -->
table+
<!-- 展開後 -->
<table>
  <tr>
    <td></td>
  </tr>
</table>

<!-- [良くある要素(子要素)] 展開前 -->
dl+
<!-- 展開後 -->
<dl>
  <dt></dt>
  <dd></dd>
</dl>

<!-- [隣り合った要素] 展開前 -->
div.hoge+div.moge
<!-- 展開後 -->
<div class="hoge"></div>
<div class="moge"></div>

<!-- [要素内コメント] 展開前 -->
p{hoge}
<!-- 展開後 -->
<p>hoge</p>

<!-- [idをコメントアウトにして展開] 展開前 -->
div#hoge|c
<!-- 展開後 -->
<div id="hoge"></div>
<!-- /#hoge -->

<!-- [エスケープして展開] 展開前 -->
div|e
<!-- 展開後 -->
&lt;div&gt;&lt;/div&gt;

<!-- [二重にエスケープして展開] 展開前 -->
div|e|e
<!-- 展開後 -->
&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;

<!-- [複数の入れ子の展開] 展開前 -->
(div>h2)*3
<!-- 展開後 -->
<div>
  <h2></h2>
</div>
<div>
  <h2></h2>
</div>
<div>
  <h2></h2>
</div>

<!-- [連番の指定方法(要素)] 展開前 -->
h$*3
<!-- 展開後 -->
<h1></h1>
<h2></h2>
<h3></h3>

<!-- [連番の指定方法(class)] 展開前 -->
div.hoge$*3
<!-- 展開後 -->
<div class="hoge1"></div>
<div class="hoge2"></div>
<div class="hoge3"></div>

<!-- [複数行の連番の指定方法(class)] 展開前 -->
div.class-$$*3
<!-- 展開後 -->
<div class="class-01"></div>
<div class="class-02"></div>
<div class="class-03"></div>

<!-- [a要素を入れ子にする] 展開前 -->
table>tr>td>a>
<!-- 展開後 -->
<table>
  <tr>
    <td><a href=""></a></td>
  </tr>
</table>

色々と記述しましたが、他にもEmmetにはCSSの素早い展開方法等もあるので、それもまた記載していければと考えています。
記述方法も特に覚えるほどのものもなくスムーズに使っていけると思いますので普段から使っていければ、Emmetを使用し素早くhtmlのコーディングをしていくことも可能だと思います。

インストール必要なソフトだがデフォルトでEmmetが使えるようになっている。 ↩

Emmetを学習しましょう

Emmetとは何か

Emmetを使うには

使えるエディター

作業環境

Emmetを使ってみよう

簡単な記述方法

Emmetの基本

id&classのもう少し具体的な話

複数個の要素を作る方法

様々な展開方法