Emmetを使って効率的にレジュメを作る

以前、Markdownを使ってレジュメを効率的に作る方法について書きました。

Markdownはシンプルなのが特徴ですが、文字の装飾には不向きです。文字の色や大きさを変えたり、下線を引いたりするときには、HTML・CSSを使う必要があります。

もともとMarkdownはHTMLを簡単に出力するために開発されたものなので、HTMLとの親和性は高いです。はてなブログやTumblrなどのブログサービスや、サイトジェネレーターのJekyllGhostを使えば、Markdownで書いたレジュメをもとに、解説記事を公開することもできます。

ただ、せっかくMarkdownを使っているのに、テキストを装飾するためだけにHTMLやCSSをいちいち書くのは、何だかじれったい感もあります。そこで、ここでは、Markdownのスピード感を損なわずにHTMLを書くための方法として、Emmetを紹介したいと思います。

Emmet(旧Zen-Coding)

Emmetは、HTMLやCSSを省略して書くためのツールです。以前はZen-Codingと呼ばれていました。現在はプラグインとして提供されており、Sublime TextやAtomなどのエディターにインストールして使います。

Sublime Textにインストールする方法

以下の手順でインストールできます。

  1. Sublime TextにPackage Controlをインストールしておく(インストールの方法
  2. Ctrl+Shift+PPackage Control: Install Package
  3. Emmetと入力、選択してインストール

Emmetの基本的な使い方

Emmetは極めようと思ったら奥が深いのですが、とりあえずは以下のポイントを押さえておけば何とかなります。

  • HTMLタグの閉じカッコ(<、>)は不要
  • 子要素は「>」で
  • 複数個の要素は「*」で
  • 要素を並列させたいときは「+」で
  • 丸カッコでグルーピングできる
  • classは「.」、idは「#」で
  • TabキーでHTMLに展開する

HTML

例1

以下のようなHTMLを出力するとします。

<div>
    <p><span class="highlight"></span></p>
</div>

Emmetで書くとこうなります。

div>p>span.hll

自動的にインデントも付けてくれます。

例2

複数の要素を出力してみます。

<div class="al al-s">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Emmetでは以下のようになります。

div.al.al-s>ul>(li>a)*2

class名も続けて書くことができます。

例3

要素を並列させてみます。

<div id="div1" class="al al-s">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
    <ol>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ol>
</div>

Emmetでは以下のようになります。

div#div1.al.al-s>(ul>(li>a)*2)+(ol>(li>a)*2)

多少複雑になりますが、原理は同じです。

CSS

EmmetはCSSにも対応しています。

.al {
    margin-top: 10px;
    float: right;
    background-color: #EEE;
}

これをEmmetで書くと、

.al {
    mt:10px
    fl
    bc:#eee
}

となります。プロパティの数だけ省略形があるので、覚えるには少し時間が掛かるかもしれません。

チートシート

書き方が分からなくなったときは、公式のチートシートを参考にしてみてください。

終わりに

いかがだったでしょうか?Markdownと併用して、快適なレジュメ+解説記事の作成に役立ててもらえればと思います。