【HTML/CSS】爆速コーディング、簡単なEmmetのススメ

使わないと損なめっちゃ捗るコーディング記法「Emmet」

コーディングに用いられるエディタの定番といえばVScode/Brackets/Dreamweaver/ATOMなどでしょうか。

今回はどのエディタでも使えるコーディングが爆速に捗る省略記法、

「Emmet」

を紹介したいと思います。

映画のTENNETに似た感じでエメットと読みます。

TENNETより断然わかり易く、時間を逆行は出来ませんが、コーディングにかかる時間を劇的に短縮できる記述法です。

まだ使ってない方は是非ご参考ください。

コーディング速度アップ、Emmet

では実際にシンプルなHTMLを、Emmetを使ってコーディングしてみた様子をGIFでご覧ください。

Emmetコーディングデモ

VScodeでEmmetコーディングデモ

ちょっとキーミスなどもあってゆっくりめに打鍵してましたが、Emmet無しの方のコーディングではこの速度でこの分量は記述できないのではないでしょうか。
(GIFなので実際よりさらに早く見えてるかも、、、)

一行呪文のように書いてるのがパッと展開される様は気持ちいいですね。

実際には僕の場合ここまでEmmetを駆使するよりもう少しシンプルに使う方が多いですが、デモンストレーションということで少し駆使してみました。

まずはシンプルな使い方から取り入れてみてください。

Emmetのシンプルな使い方1 HTMLの場合

一番シンプルな使い方はCSS セレクタのようにHTMLを記述する方法です。

VScodeでEmmet、一番基本のクラスやID名での展開方法

CSSのように、クラスの場合は「.」からクラス名を書いて展開しています。

１つめの例ではタグを指定せずにいきなり「.class-name」と入力してTABキーを押して展開するとdivタグにclass-nameというクラスが記述された状態になっています。
2つめの例ではpタグを使って「p.class-name」としてるため、pタグにclass-nameというクラスがついて展開されています。
3つめの例ではaタグで「a#id-name」としているので、ID名として展開されています。

展開は通常TABキーである事が多いと思います。

こうやっていちいち閉じタグを記入したり、「class=""」と書かなくていいだけでかなりの時間短縮になるのではないでしょうか。

Emmetのシンプルな使い方2 CSSの場合

CSSではかなりの数のプロパティが存在しますが、その多くをEmmetでは頭文字っぽく短縮して入力できます。

VScode上、EmmetでCSS爆速コーディング例

少し分かりづらいかもしれませんが上の例では以下のように入力しています。

「text-align: center;」=「tac」で展開
「font-size: 18px;」=「fz18」で展開
「width: 100%;」=「w100%」で展開
「padding: 1em;」=「p1e」で展開
「margin: 0 auto;」=「m0-a」で展開
「background-color: #fff;」=「bgc」で展開
「background-repeat: no-repeat;」=「bgr」で展開
「border: 1px solid #000;」=「bd1」で展開
「border-radius: 10px;」=「bdrs10」で展開
「position: relative;」=「posr」で展開
「z-index: 1;」=「zi1」で展開

だいたいが3～5文字程度入力して展開しているのがお分かりいただけるでしょうか。

一部VScodeのスニペットの入力補助など効いてる部分もあるかもしれませんが、かなり少ない入力でコーディング効率を上げられていると思います。

これら全てを最初から覚えようとはしなくても、

「text-align: center;」

「background-color」

「position: relative;」

という単語の節目や頭文字の部分の短縮になっているので、こうだったかな？と入力してみて、展開が上手くいかなければ別の方法を試したりしてるうちに自然と覚えていきます。

Emmetの応用的な使い方連番

ファイル名やクラス名などに名前＋連番で値を指定したい時がありますよね。

コピーして貼り付けて、カーソル移動しながらファイル名を全てリネームしていくのは3つ以上となるとなかなか面倒です。ましてや10以上となると数十秒～作業コストがかかるので勿体ないですね。

Emmetなら一瞬でポンと連番作成できます。

Emmetで連番のタグ展開方法

方法は複数作成する部分に「*」を使用し、連番にしたい部分に$を使用するだけです。

html

li*10>img[src="image-$$.jpg" class="class-$"]

<!-- ↑これをEmmetで展開すると一瞬で↓こうなります -->
<li><img src="image-01" alt="" class="class-1"></li>
<li><img src="image-02" alt="" class="class-2"></li>
<li><img src="image-03" alt="" class="class-3"></li>
<li><img src="image-04" alt="" class="class-4"></li>
<li><img src="image-05" alt="" class="class-5"></li>
<li><img src="image-06" alt="" class="class-6"></li>
<li><img src="image-07" alt="" class="class-7"></li>
<li><img src="image-08" alt="" class="class-8"></li>
<li><img src="image-09" alt="" class="class-9"></li>
<li><img src="image-10" alt="" class="class-10"></li>