Emmet Tutorial - a quick demo http://youtu.be/bwPETjsRH-Y Emmet Cheat Sheet http://docs.emmet.io/cheat-sheet/ Emmet Documentation http://docs.emmet.io/

1. Zen Codingの後継版「Emmet」で
快適HTML/CSSコーディングを始めよう！
柳 大地

2. 記号の入力が面倒くさい… <a href=“http://” …
単調なコピー＆ペーストの繰り返し… <br><br><br><br><br>…
タイピングしすぎて指が痛い…

4.  HTML/CSSコーディングを楽にするツール
 Zen Codingの後継版
 百聞は一見にしかず（動画チュートリアルを見ましょう）
◦ http://www.youtube.com/watch?v=bwPETjsRH-Y
◦ http://docs.emmet.io/

8.  タグ名 ＋ 実行 （SublimeではCtrl+E)
div
<div>|</div>
展開後
入力

10. div.hoge
<div class="hoge">|</div>
展開後
入力

11. a
<a href=“|”></a>
展開後
入力

12. ul>li
<ul>
<li>|</li>
</ul>
展開後
入力

13. ul>li.item$*5
<ul>
<li class="item1">|</li>
<li class="item2"> </li>
<li class="item3" > </li>
<li class="item4"> </li>
<li class="item5"> </li>
</ul>
展開後
入力

14. Dreamweaver
Sublime
Eclipse
NetBeans
IntelijIDE
Vim
Notepad++
秀丸
サクラエディタ
etc.
多くのエディタがプラグイン
でサポート！！

15.  Sublime 3をインストール
 http://www.sublimetext.com/3 （ダウンロード用）
 http://www.sublimetext.com/ （Sublimeデモ）
 Sublime 3を起動し、プラグインインストーラーを起動
 Ctrl + Shift + P＞’package isntall’など入力、
 Package Control: Install Package を選択する
 Emmetと入力して選択、再起動で完了
 動作確認 aと入力してCtrl+Eを押して展開してみる

17. div#main>ul>li.item$$$*3>a>span.icon.icon-hoge
？
展開後
入力

18.  Emmet Cheat Sheet ※便利な早見表です
 http://docs.emmet.io/cheat-sheet/