Emmet

emmet.png

Getting Started

emmetのダウンロードページからダウンロードする。
色々選べるみたいだけど、私はWindowsを使っていて、軽いからSublime Textが好き、なのでSublime Textのを選んだ。
emmet-sublimeをインストールするにはPackage controlをインストールすることがおすすめされているようだ。
Package Controlのインストールの仕方は
このページがわかりやすかった。

Sublime Textでの使い方

Set Syntaxする

まずはCtrl+Shft+pでテキストボックスが出たら、「html」と打つ。
たとえば、なんでもいい、こういうの書く

#page>div.logo+ul#navigation>li*5>a{Item $}

そして,展開させたいところの行末に行ってCtrl+Eで展開する。

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

こうなる。なるほどーー

サポートサイト Wikidot.com