新人WEB担当者が覚えておくと便利「Emmetで快適爆速コーディングライフのすすめ」

新人Web制作者 / 2017.03.27

新人WEB担当者が覚えておくと便利「Emmetで快適爆速コーディングライフのすすめ」

こんにちは。それからデザイン入社1年目の長島です。日々、質の良いアウトプットをより効率的に作りたい！と試行錯誤の私が飛びついたのが「Emmet」です。「Emmet」はDreamweaverCC2017から搭載されており、その他のHTMLエディタでも簡単に導入できます。 HTML/CSSの記述を素早く簡単に行うには、今や「Emmet」なしではもう生きていけない、とまで思っているほどです。そして、一度導入してしまえば「Emmet」なしの環境にストレスを感じてしまうほど強力な時間短縮ツールになります。今回は、コーディングスピードを爆発的に上昇させる「Emmet」とは一体どういったものなのかを、よく使う例を交えてご紹介いたします。それでは早速、HTMLの例を見ていきましょう。

aタグ

classを付けた複数のdiv gif_002

複雑な構造の繰り返し gif_003

このように、圧倒的にコーディングの手数を減らすことができるのです。それでは次に「Emmet」の基本的なルールをご説明します。

「Emmet」の入力規則（HTML編）

「Emmet」の使い方は「Emmet」導入後、タグとルールに基づいた記号を打ち、「tabキー」や「command + E」を押すだけです。（コーディング環境により異なります。）次に挙げる基本的なルールを覚えてしまえば、すぐに「Emmet」の恩恵を受けることができます。

１.タグの展開

タグの名前を打って展開するだけで自動的に閉じタグまで付けてくれます。タグによっては必要な属性も自動的に処理され、長いタグは省略形も用意されています。

p
/*展開 tabキー or command+E*/
<p></p>

img
/*展開*/
<img src="" alt="">

sect
/*展開*/
<section></section>

/*展開 tabキー or command+E*/

<p></p>

img

/*展開*/

sect

/*展開*/

２.IDとclassを付ける

「#」「.」をタグの次に入力すれば展開した時にIDやclassが付き、続けて文字を入力することでその名前のIDやclassを付けることもできます。

p.
/*展開 tabキー or command+E*/
<p class=""></p>

span.test
/*展開*/
<span class="test"></span>

/*展開 tabキー or command+E*/

span.test

/*展開*/

タグ名は省略し、ID、class名のみ入力すると自動的にdivにID、class名が付く優れた仕様です。

#wrapper
/*展開 tabキー or command+E*/
<div id="wrapper"></div>

#wrapper

/*展開 tabキー or command+E*/

３.入れ子の構造を作る

「>」を使用すると次の要素を入れ子にすることができます。

p>span
/*展開 tabキー or command+E*/
<p><span></span></p>

.test>p>span
/*展開*/
<div class="test">
    <p><span></span></p>
</div>

p>span

/*展開 tabキー or command+E*/

.test>p>span

/*展開*/

</div>

４.兄弟の要素を作る

同階層に要素を作る場合は「+」を使用します。

.test+.test2
/*展開 tabキー or command+E*/
<div class="test"></div>
<div class="test2"></div>

.box>p+ul
/*展開*/
<div class="box">
    <p></p>
    <ul></ul>
</div>

.test+.test2

/*展開 tabキー or command+E*/

.box>p+ul

/*展開*/

<p></p>

</div>

５.一階層上に要素を作る

「^」を使用すると次に入力した要素を一階層上に作ることができます。「^」を二つ使用し、更に上の階層に作ることもできます。

p.hoge>span^footer
/*展開 tabキー or command+E*/
<p class="hoge"><span></span></p>
<footer></footer>

.box>p>.txt^^figure
/*展開*/
<div class="box">
    <p><span class="txt"></span></p>
</div>
<figure></figure>

p.hoge>span^footer

/*展開 tabキー or command+E*/

.box>p>.txt^^figure

/*展開*/

</div>

６.同じ要素を複数作る

「*」を使用すると直前の要素を複数作ることができます。例えば「p*3」とするとpを三つ、「ul>li*5」とするとulの中にliを五つ作ることができます。

ul>li.item*5
/*展開 tabキー or command+E*/
<ul>
    <li class="”item”"></li>
    <li class="”item”"></li>
    <li class="”item”"></li>
    <li class="”item”"></li>
    <li class="”item”"></li>
</ul>

ul>li.item*5

/*展開 tabキー or command+E*/

<ul>

</ul>

７.テキストを入れる

「{}」を使用すると要素の中にテキストを入れることができます。

.txt>p{こんにちは}
/*展開 tabキー or command+E*/
<div class="”txt”">
    <p>こんにちは</p>
</div>

.txt>p{こんにちは}

/*展開 tabキー or command+E*/

<p>こんにちは</p>

</div>

８.連続した数字を入れる

「$」を使用すると1から順番に数字を入れることができます。 classの名前に番号を振って、複数つけたい時にとても重宝します。

.box$*2>figure>img
/*展開 tabキー or command+E*/
<div class="box1">
    <figure><img src="" alt=""></figure>
</div>
<div class="box2">
    <figure><img src="" alt=""></figure>
</div>

.box$*2>figure>img

/*展開 tabキー or command+E*/

</div>

</div>

いかがでしたか。早くも試したくなってきたのでは？私も初めて使うときはワクワクと感動を覚え、瞬く間に虜になってしまいました。「Emmet」の導入はとても簡単です。ぜひあなたのコーディング環境に取り入れてみてくださいね。最後に「Emmet」のチートシートです。「Emmet」でできることのすべてがここでわかります！ https://docs.emmet.io/cheat-sheet/