ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

jsdo.itでEmmetが使えるようになってる

実のところは結構前から使えるようになってた気がするのですが、使い方がよくわかってなかったのでいまさらですがご紹介。

そもそもEmmetってなに?

CSSセレクタっぽくHTMLを楽に書くプラグインのことです。昔はZen Codingと呼ばれていたようです。メジャーなエディターにはだいたいプラグインがあるそうですよ。EmacsSublimeにはありました。

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