狠狠撸

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

More Related Content

贰尘尘别迟入门