jsdo.itでEmmetが使えるようになってる
実のところは結構前から使えるようになってた気がするのですが、使い方がよくわかってなかったのでいまさらですがご紹介。
そもそもEmmetってなに?
CSSのセレクタっぽくHTMLを楽に書くプラグインのことです。昔はZen Codingと呼ばれていたようです。メジャーなエディターにはだいたいプラグインがあるそうですよ。EmacsとSublimeにはありました。
section#hoge>article.fuga*2>h1[title=$]+section.body
と打ち込み、行末にカーソルを合わせてTabを打つと
<section id="hoge"> <article class="fuga"> <h1 title="1"></h1> <section class="body"></section> </article> <article class="fuga"> <h1 title="2"></h1> <section class="body"></section> </article> </section>
というふうに展開されます。
詳しく見てみよう
というわけで
section#hoge>article.fuga*2>h1[title=$]+section.body
の1行を見て行きましょう。
属性をつける
id属性とclass属性はCSSと同じようにつけられます。
- section#hoge
- article.fuga
この2つがそうですね。ほかはCSS3で追加された記法でつけることができます。
- h1[title=$]
これがそうです。
子要素と兄弟要素
>は子要素をあらわします。
- section#hoge>article.fuga
ここでなど使っていますね。この場合は
の場合は
<section id="hoge"> <article class="fuga"></article> </section>
というふうに展開されます。
+は兄弟要素です。
- h1[title=$]+section.body
の部分で使っています。この場合は
<h1 title="1"></h1> <section class="body"></section>
というふうに展開されます。
複数個のタグ
「タグ*個数」というふうにすることで複数個のタグを量産することができます。
- ul>li*5
とすると、
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
というふうになります。
連番をふる
$を書くと、そこが連番に書き換えられます。
謹製のチートシートがあるよ
ここで紹介したのはほんの一部ですが、よく使うんじゃないかなと思ったものです。Emmetにはその他にもショートカットが存在します。それをまとめたチートシートがこちら。やたら長いです。
Cheat Sheet
長すぎてまだほとんど読めてませんw