HTML/CSSを素早く記述する「Emmet」の連載をはじめてました

2015-07-22

Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。様々なIDEやエディタに対応しています。

アドビ公式ブログの「Adobe Creative Station」でEmmetの連載をはじめてました。
全6回中4回まで掲載されたので、補足を含めて紹介します。

Emmetの連載

アドビ製品の機能などを紹介する「Adobe Pinch in」というサイトで連載のはじめましたが、現在は「Adobe Creative Station」に移行して、連載を行っています。

連載内容は以下のとおりです。

連載一覧 - HTML/CSSを爆速コーディング Emmet入門

疑問・補足

ソーシャルなどで挙がっていたEmmetに対する補足

なぜ、Bracketsを中心に解説しているのですか？

Adobeの公式ブログで連載を行っています。
察してください。

HTMLだけじゃなく、CSSも展開できるんですか？

Emmetの前身であるZen-Codingの頃から、CSSの展開機能はありました。ただしZen-Codingは、決まった略語を間違えずに入力する必要があり、柔軟にCSSを展開できるHayakuというプラグインが重宝されていました。

第3回でも触れていますが、現在のEmmetは「Fuzzy Search」が導入され、Hayakuと似た機能をデフォルトでサポートしています。

コードヒントじゃなくて、EmmetのCSSを使った方が早い？

第3回のGIFアニメを見ていただけるといいかもしれません。
プロパティと値をそれぞれ一つ一つ選択していくコードヒントと比べて、EmmetのCSSは一瞬でプロパティと値の両方を展開できるため、記述の時間短縮につながります。

学習コストもあるので、コードヒントと併用して使ってもいいかもしれません。
最初は、以下のセットから始めてはいかがでしょう。

w980 -> width: 980px;
m20 -> margin: 20px;
m20-0-30 -> margin: 20px 0 30px;
p10 -> padding: 10px;
bd+ -> border: 1px solid #000;
bg+ -> background: #fff url() 0 0 no-repeat;

HTMLの連番を途中から始めたいです。

連番の数値を出力する$の後ろに続けて@と途中からはじめたい数値を入力すると、任意の数値から連番がはじめられます。また数値をマイナスに変更することで、数値を減らせます。

ul>li*3>{Step-$$@8}

<!-- 展開後 -->
<ul>
  <li>Step08</li>
  <li>Step09</li>
  <li>Step10</li>
</ul>


ul>li*3>{Step$$$$@-}

<!-- 展開後 -->
<ul>
  <li>Step0003</li>
  <li>Step0002</li>
  <li>Step0001</li>
</ul>

Jadeを使えば、Emmetはいらないんじゃない？

Jadeは、HTMLをシンプルに記述できるHTMLメタ言語です。
インデントを利用して、下記のようなシンタックスで記述できます。

h1 Hello world!
.contents
  p lorem
  |   
  p
    | Lorem 
    strong ipsum dolor
    |  sit amet, 
    br
    |   consectetur adipisicing elit. 
    br
    |   Maiores animi velit aperiam culpa.
  |   
  ul#demo.demo
    li.item-1 text
    |     
    li.item-2 text2

Jadeはシンプルに記述できるため、HTMLを記述する時は、Emmetを使わなくても問題ありません。
ただしJadeなどのメタ言語を利用する場合も、Emmetは補助ツールとして利用できます。

例えば、属性を追加したい場合。「a」や「img」など属性を必要とする記述の時間の短縮が可能です。

a
img
input-t
input-r

<!-- 展開後 -->
a(href="")
img(src="", alt="")
input#(type="text", name="")
input#(type="radio", name="")

また独自のHTMLのスニペットを作成した時に、メタ言語にあわせたスニペットを追加する必要あります。
Emmetであれば、1つのスニペットからHTML, XHTML, Haml, Jadeなどの言語にあわせてシンタックスを変更してくれるので、スニペットを複数用意しなくても構いません。

autoprefixerを使っているため、Emmetでベンダープリフィックスを出したくない。

第4回で解説していますが、環境ファイルを変更すればベンダープリフィックスは、出なくなります。

アップデートしたら、スニペットが消えてしまった！

Emmet本体のJSONファイルなどは、なるべく触らないようにしましょう。
サードパーティでサポートしているエディタは難しいかもしれませんが、オフィシャルサポートしているエディタやIDEであれば、Emmetのスニペットや環境フィルを外部で持つことができるはずです。

第4回で解説しているので、確認してみてください。

最後に

連載は第5, 6回が控えています。
今後の連載では、HTMLやCSSの展開ではなく、タグの削除や選択範囲操作、四則演算などについて触れていこうと思っています。

次の記事: リモートWeb開発者ツール「Vorlon.JS」

前の記事: Sassで視覚的にレイアウトを変更してみる

HOMEに戻る