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で楽々コーディング

93 views

Published on

2017.5.28

Published in: Internet
  • Be the first to comment

Emmetで楽々コーディング

  1. 1. Emmetで 楽々コーディング 2017.5.28 かとさん
  2. 2. About me WEBシステム受託開発会社 勤務 UIデザインとHTML/CSSコーディングを主に担当 jQuery、PHP、CakePHPも少し。 専門学校や取引先会社でHTML/CSSの講師経験あり Emmet歴:始めたばかり twitter かとさん @mk9ueen お気軽にフォローしてください 趣味 ゲーム音楽コンサート ゲーム実況を見る 神社巡り、登山など。
  3. 3. Emmetとは?
  4. 4. HTMLやCSSの記述を 楽にしてくれるプラグイン
  5. 5. 導入がラク おすすめする理由①
  6. 6. 導入がラク 対応エディタですぐ使える コンパイル環境不要
  7. 7. 学習コスト超低 おすすめする理由②
  8. 8. 学習コスト 超低 3分で理解できる(!?) よく使う文法だけ覚えればOK
  9. 9. 使ってみる Let’s Enjoy Emmet!
  10. 10. 省略語+tabキー で展開 基本 tabキー
  11. 11. 実際にコーディング してみます
  12. 12. 紹介した文法 ! h1 .header input inp input:c select>option*5 nav>ul>li*5>a[href=#]>{link$} c c:r fz fz16 m0 p0 m100p bgc d d:n HTML CSS 実際に 使ってみよう
  13. 13. 対応エディタ Sublime Text Atom Ecllipse/Aptana TextMate Chocolat Komodo Edit Notepad++ PSPad textarea CodeMirror Brackets NetBeans Adobe Dreamweaver など * SPECIAL THANKS * emmet@JAPAN http://emmet.56doc.net/#part5
  14. 14. 学習方法 公式のチートシート(文法をサクッと探せる) https://docs.emmet.io/cheat-sheet/ Emmet@JAPANさん(日本語での解説がありがたい) http://emmet.56doc.net/ ドットインストールさん(動画でマスター) http://dotinstall.com/lessons/basic_emmet/25101
  15. 15. 上手に活用するには エディタの補完機能の方が 優れている場合もある 使い分けよう
  16. 16. まとめ まずは覚えた文法だけでも 使ってみる価値あり
  17. 17. ありがとうございました Thanks for listening.

×