進化したzen coding "emmet"
DESCRIPTION
Web Touch Meetin #64での発表スライドです。TRANSCRIPT
WTM #62
進化したZen-Coding
Emmet
井上 拓takanashi66
広島工業大学 4年フロントエンドエンジニア
2回目の登壇
CSS Nite in HIROSHIMA 実行委員
Emmet
知ってますか？
Emmet
Zen Codingの進化系Emmetと名前を変えて開発が進行中
2013/02/24 リリース
Emmet
the essential toolkit for web-developers- Web開発者にとって不可欠なツールキット
Emmetスニペットとショートカットを組み合わせて、 効率的にHTML, CSSのマークアップができる
Emmet
Emmet覚えておくことはただ１つ
+ ectrl
あと、+ () > ^ *
環境によるようです……
ショートカットは変更できます
Emmet
nav
Zen Codingと共通 <HTML>
Emmet
<nav> </nav>
Zen Codingと共通 <HTML>
ctrl + e
Emmet
nav>ul
Zen Codingと共通 <HTML>
Emmet
<nav> <ul> </ul> </nav>
ctrl + e
Zen Codingと共通 <HTML>
Emmet
li*3
Zen Codingと共通 <HTML>
Emmet
<li></li> <li></li> <li></li>
ctrl + e
Zen Codingと共通 <HTML>
Emmet
(nav>ul)+div
Zen Codingと共通 <HTML>
Emmet
<nav> <ul></ul> </nav> <div> </div>
ctrl + e
Zen Codingと共通 <HTML>
Emmet
.wrap
Zen Codingと共通 <HTML>.でclass
divは省略可能
Emmet
<div class=“wrap”></div>
Zen Codingと共通 <HTML>.でclass
ctrl + e
divは省略可能
Emmet
#wrap
Zen Codingと共通 <HTML>#でid
divは省略可能
Emmet
<div id=“wrap”></div>
Zen Codingと共通 <HTML>
ctrl + e
#でid
divは省略可能
Emmet
nav>ul^div
新機能 ^
Emmet
<nav> <ul> </ul> </nav> <div> </div>
ctrl + e
新機能 ^
Emmet
header > nav > ul ^^ div
新機能 ^
Emmet
m
Zen Codingと共通 {CSS}
Emmet
margin: ;
ctrl + e
Zen Codingと共通 {CSS}
Emmet
m5
新機能 数値入力
Emmet
margin: 5px;
ctrl + e
新機能 数値入力
Emmet
m0-a
新機能 数値入力
Emmet
margin: 0 auto;
ctrl + e
新機能 数値入力
Emmet
-bdrs10
新機能 ベンダープレフィックス
Emmet
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
ctrl + e
新機能 ベンダープレフィックス
Emmet覚えておくといいもう１つ
ctrl + alt + a
環境によるようです……
Wrap変換
ショートカットは変更できます
Emmet
めにゅー１
wrap変換
これをaで囲む
Emmet ctrl + aalt +選択してwrap変換
<a href=“”>めにゅー１</a>
Emmet
!
Emmet
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
ctrl + e
Emmet拡張させる
<html lang="en"> <html lang="ja"> →
Emmet設定ファイルの記述はJSON
なのでちょろっと書き換えるだけで カスタマイズ可能。
Emmetファイルパスは
/Users/[ユーザネーム]/Library/Application Support/ Coda 2/Plug-ins/Emmet.codaplugin/Contents/Resources
Emmetファイルパスは
/Users/[ユーザネーム]/Library/Application Support/Adobe/Dreamweaver CC/ja_JP/Configuration/Commands/Emmet
EmmetSublime Textはもっと簡単で
Preferences ＞ Package Settings ＞ Emmet ＞ Settings - User
Emmet{ "snippets": { "html": { "snippets": { "dldt": "<dl>\n<dt>${child}</dt>\n<dd></dd>\n</dl>" } } } }
Emmetコーダではまったこと
Coda2でscssファイルはcss扱いっぽい？
scssのところに書いても反映されない
まとめ覚えておくべきことはただ１つ！
ctrl + e
まとめ導入が簡単
光速コーディングが可能
今の環境にに少しのプラスで
ありがとうございました