2013年7月11日の勉強会でのLTの資料です。

1. Emmet入門
ラクするマークアップ
13年7月11日木曜日

2. ・自己紹介
・Emmetとは?
・やってみよう!
・結論
もくじ
13年7月11日木曜日

3. ・ふるさわ こうた (@Moscohan)
・会津大学４年
・TheDesigniumのインターン生
・web系の技術を勉強中！
13年7月11日木曜日

4. Emmetとは？(エメット)
？
13年7月11日木曜日

5. EmmetはHTML/CSSのコーディングを
サポートするプラグイン
(旧Zen-Coding)
！
13年7月11日木曜日

6. 2013年2月24日に正式リリース
13年7月11日木曜日

7. 対応しているエディタ
13年7月11日木曜日

8. どういいの？
13年7月11日木曜日

9. やってみよう！
HTML編
13年7月11日木曜日

10. div
展開!
Mac: ⌘ + E
Win: ctrl + E
p
展開!
☆基本
13年7月11日木曜日

11. #wrapper
展開!
☆id名
13年7月11日木曜日

12. img.logo
展開!
☆class名
13年7月11日木曜日

13. #wrapper>img.logo
展開!
☆入れ子
13年7月11日木曜日

14. #wrapper>a>img.logo
展開!
☆もっと入れ子
13年7月11日木曜日

15. ul>li.list*3
展開!
☆複数
13年7月11日木曜日

16. ul>li#list$*3
展開!
☆連番
13年7月11日木曜日

17. ul>li#list$$$ban*3
展開!
☆もっと連番
13年7月11日木曜日

18. img#title.logo[src="test.jpg" alt="ロゴ"]
展開!
☆属性
13年7月11日木曜日

19. 展開!
input[type="text" name="name" value="value"
data-num="1"]
☆独自データ属性も
13年7月11日木曜日

20. #wrapper>a>img^h1{タイトル}+p
展開!
☆上の階層にもどる
13年7月11日木曜日

21. html:5
展開!
☆ひな形一発
13年7月11日木曜日

22. 展開!
html:5>#wrapper>a>#img.logo[src="test.jpg" art="ロゴ"]^h1{タイトル}+p
+ul>li#list$$$*5>a^^^script[src="script.js"]
☆まとめ
！！！
13年7月11日木曜日

23. やってみよう！
CSS編
13年7月11日木曜日

24. div{
w100
h100
m10
p10
}
それぞれ
展開!
☆基本
13年7月11日木曜日

25. width
なんて読む？
余談
13年7月11日木曜日

26. 余談
13年7月11日木曜日

27. 余談
※笑うとこです
13年7月11日木曜日

28. height
なんて読む？
余談
13年7月11日木曜日

29. 余談
※本当です
13年7月11日木曜日

30. div{
w100
w100p
w100e
}
それぞれ
展開!
☆単位
13年7月11日木曜日

31. div{
d:b
ta:c
bd+
m10-5-0
}
それぞれ
展開!
☆応用
13年7月11日木曜日

32. div{
-bdrs3
}
展開!
☆接頭辞
13年7月11日木曜日

33. 他にもたくさん！
・wrap変換
・ダミーテキスト生成
・値の増減
・計算
13年7月11日木曜日

34. 結論
13年7月11日木曜日

35. 慣れたら早い
http://docs.emmet.io/cheat-sheet/
チートシート：
慣れるまではつらい
13年7月11日木曜日

36. おしまい
ご清聴ありがとうございました！！
13年7月11日木曜日