『人に何かを教える』というお題の授業で使用する資料 HTMLベタ打ちは終わりにしようをテーマに Emmet編を担当しその時の資料です。 Emmetを使いこなすというより興味を持ってもらう を目標に構成しました。

1. Emmet 入門
HTMLを卒業しよう( 1部 )

2. Emmetとは?

3. Emmetとは
少ないタイピングで
HTML・CSSを生成できる
テキストエディターのプラグ
インのこと。

4. 使用可能な
テキストエディター

5. http://emmet.io/download/

6. 実際に試してみよう

7. http://jsdo.it/
emmetが試せる
コードの共有サイト

8. 右上でログインしよう
twitterでログインがおすすめ

9. 次は 左上で始める
Start coding をクリック

10. これで準備おk
HTMLタブを選択し全て消してください。

11. HTML

12. 早速ひな形を
一瞬で作ろう

13. !
「 ! 」を入力して Tab キーを入力。

14. これだけ あとTabキー

15. ひな形が一瞬

16. 今回は Tab キー
ですが、
テキストエディターだと
Ctrl + E (win)
Cmd + E (mac)

17. h2
「 h2 」を入力して Tab キーを入力。

18. < >は不要

19. p#btn{へぇ∼}
「 p#btn 」を入力して Tab キーを入力。

20. id は『#』class は『.』

21. ul>li*5>a[href=#]{$}
これを押すと。。。

22. ul>li*5>a[href=#]{$}

23. ul>li*5>a[href=#]{$}
> は 入れ子
*5 は 繰り返し
[ ] は 属性
{ } は 中身
$ は 連番

24. CSS

25. CSSのタブを選択

26. h2{ ta:c }
入力後 ta:cの後ろで Tabキー

27. text-align: center
ta:c

28. #btn に以下を記述

29. • tac
• bgc#aaa
• c#fff
• w150
• h150
• lh150px
• m0-auto
• bdrs50%
• bxsh0-10-0-#888
先ほどの
ta:c 『:』も省略可能
複数の値は
『-』ハイフンで繋ぐ

30. ベンダープレフィックスも展開

31. こんなのができた？
へぇ∼ボタン

32. http://docs.emmet.io/cheat-sheet/
覚えれないよね？チートシートあります！

33. blog.cheekpouch.com
Atomエディターでのemmet設定など記事書いてるよ。
今回の復習用記事書く予定。

34. ネットで共有するお
FBでシェアーする予定 欲しい人は友達申請してね

35. 余った時間で
一杯いこうか。
Flickr: Matthew Coughlin

36. ご静聴
ありがとうございました。