Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Emmet入門

1,544 views

Published on

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

  • Be the first to comment

Emmet入門

  1. 1. Emmet入門 ラクするマークアップ 13年7月11日木曜日
  2. 2. ・自己紹介 ・Emmetとは? ・やってみよう! ・結論 もくじ 13年7月11日木曜日
  3. 3. ・ふるさわ こうた (@Moscohan) ・会津大学4年 ・TheDesigniumのインターン生 ・web系の技術を勉強中! 13年7月11日木曜日
  4. 4. Emmetとは?(エメット) ? 13年7月11日木曜日
  5. 5. EmmetはHTML/CSSのコーディングを サポートするプラグイン (旧Zen-Coding) ! 13年7月11日木曜日
  6. 6. 2013年2月24日に正式リリース 13年7月11日木曜日
  7. 7. 対応しているエディタ 13年7月11日木曜日
  8. 8. どういいの? 13年7月11日木曜日
  9. 9. やってみよう! HTML編 13年7月11日木曜日
  10. 10. div 展開! Mac: ⌘ + E Win: ctrl + E p 展開! ☆基本 13年7月11日木曜日
  11. 11. #wrapper 展開! ☆id名 13年7月11日木曜日
  12. 12. img.logo 展開! ☆class名 13年7月11日木曜日
  13. 13. #wrapper>img.logo 展開! ☆入れ子 13年7月11日木曜日
  14. 14. #wrapper>a>img.logo 展開! ☆もっと入れ子 13年7月11日木曜日
  15. 15. ul>li.list*3 展開! ☆複数 13年7月11日木曜日
  16. 16. ul>li#list$*3 展開! ☆連番 13年7月11日木曜日
  17. 17. ul>li#list$$$ban*3 展開! ☆もっと連番 13年7月11日木曜日
  18. 18. img#title.logo[src="test.jpg" alt="ロゴ"] 展開! ☆属性 13年7月11日木曜日
  19. 19. 展開! input[type="text" name="name" value="value" data-num="1"] ☆独自データ属性も 13年7月11日木曜日
  20. 20. #wrapper>a>img^h1{タイトル}+p 展開! ☆上の階層にもどる 13年7月11日木曜日
  21. 21. html:5 展開! ☆ひな形一発 13年7月11日木曜日
  22. 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. 23. やってみよう! CSS編 13年7月11日木曜日
  24. 24. div{ w100 h100 m10 p10 } それぞれ 展開! ☆基本 13年7月11日木曜日
  25. 25. width なんて読む? 余談 13年7月11日木曜日
  26. 26. 余談 13年7月11日木曜日
  27. 27. 余談 ※笑うとこです 13年7月11日木曜日
  28. 28. height なんて読む? 余談 13年7月11日木曜日
  29. 29. 余談 ※本当です 13年7月11日木曜日
  30. 30. div{ w100 w100p w100e } それぞれ 展開! ☆単位 13年7月11日木曜日
  31. 31. div{ d:b ta:c bd+ m10-5-0 } それぞれ 展開! ☆応用 13年7月11日木曜日
  32. 32. div{ -bdrs3 } 展開! ☆接頭辞 13年7月11日木曜日
  33. 33. 他にもたくさん! ・wrap変換 ・ダミーテキスト生成 ・値の増減 ・計算 13年7月11日木曜日
  34. 34. 結論 13年7月11日木曜日
  35. 35. 慣れたら早い http://docs.emmet.io/cheat-sheet/ チートシート: 慣れるまではつらい 13年7月11日木曜日
  36. 36. おしまい ご清聴ありがとうございました!! 13年7月11日木曜日

×