先日HTML・CSSコーディングの効率化で調べていたところ、Emmetの記事にたどり着きました。

Emmetとは？

公式サイト

Emmetとは、HTMLやCSSを省略記法で入力できるプラグインです。
省略した記法で記述してEnterやTabキーを押すだけでHTMLやCSSに自動変換され記述できる便利な機能です。

わたしがメインで使っているDreamweaverにも標準で搭載されているとのこと！
これは使わなければもったいない！ということで、さっそく学習してみました。

Emmetの使い方　◇HTML編◇

htmlファイルを作成してEmmetが使えるエディタで開きます。
下記に紹介している入力例を記述して、TabキーかEnterキーを押すと展開されます。

【基本形】要素 + Tab または Enter（Dreamweaverの場合Tab）

<h1></h1>

<section></section>

<div class=""></div>

※divタグは「.（ドット）」のみで展開できます。

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

<header id="top"></header>

【階層】要素 > 要素　「>」で入れ子構造を表示

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

<div><a href=""></a></div>

【複製】要素 * 数字　「*」で繰り返しの要素を表示

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

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

【並列】要素 + 要素　「+」で兄弟要素（並列関係）を表示

<h2></h2>
<p><p>

【グループ】要素 (要素 + 要素)　「()」で要素をグルーピング

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

【連番】.クラス $ * 数字　「$」でクラス名の連番を付与

<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>

【階層】要素 > 要素 ^ 要素　「^」で1つ上の階層へ戻る

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

【コメント】c または |c　「c」でコメントを出力

<!-- -->

<div class="box"></div><!-- /.box -->

Emmetの使い方　◇CSS編◇

CSSはプロパティ名の頭文字を入力してEnterキーかTabキーを押すと展開されます。
ここではよく使うプロパティをご紹介します。

【基本形】よく使うプロパティ

【単位】各プロパティ数値単位

【余白】padding・margin

【フォント】font

【テキスト】text

【線】border

Emmet チートシート

今回紹介した省略記法は代表的な一例で、この他にも様々な記法があります。
Emmetにはチートシートがありますので、こちらを参考に1つずつ覚えていきましょう。

Emmet チートシート

まとめ

覚えるまでの学習コストはかかりますが、習得できればかなりの効率化が期待できそうです。
チートシートを活用しながら、よりスムーズなコーディングを行っていきたいと思います。