2017.5.28

1. Emmetで
楽々コーディング
2017.5.28
かとさん

2. About me
WEBシステム受託開発会社 勤務
UIデザインとHTML/CSSコーディングを主に担当
jQuery、PHP、CakePHPも少し。
専門学校や取引先会社でHTML/CSSの講師経験あり
Emmet歴：始めたばかり
twitter
かとさん
@mk9ueen
お気軽にフォローしてください
趣味
ゲーム音楽コンサート
ゲーム実況を見る
神社巡り、登山など。

3. Emmetとは？

4. HTMLやCSSの記述を
楽にしてくれるプラグイン

5. 導入がラク
おすすめする理由①

6. 導入がラク
対応エディタですぐ使える
コンパイル環境不要

7. 学習コスト超低
おすすめする理由②

8. 学習コスト
超低
3分で理解できる（!?）
よく使う文法だけ覚えればOK

9. 使ってみる
Let’s Enjoy Emmet!

10. 省略語＋tabキー
で展開
基本
tabキー

11. 実際にコーディング
してみます

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. 対応エディタ
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. 学習方法
公式のチートシート(文法をサクッと探せる)
https://docs.emmet.io/cheat-sheet/
Emmet@JAPANさん（日本語での解説がありがたい）
http://emmet.56doc.net/
ドットインストールさん（動画でマスター）
http://dotinstall.com/lessons/basic_emmet/25101

15. 上手に活用するには
エディタの補完機能の方が
優れている場合もある
使い分けよう

16. まとめ
まずは覚えた文法だけでも
使ってみる価値あり

17. ありがとうございました
Thanks for listening.