Recommandé
Contenu connexe
Tendances
Similaire à はじめてのEmmet with Sublime Text2
Similaire à はじめてのEmmet with Sublime Text2 (20)
Plus de Sadaaki HIRAI
Dernier
Dernier (9)
はじめてのEmmet with Sublime Text2
- 1. はじめてのEmmet with Sublime Text2 2012/11/07 第0回 Sublime Text2 勉強会 @C.A.Mobile ひらい さだあき 12年11月10日土曜日
- 2. Profile •ひらい さだあき ( @sada_h / techlog ) •エンジニア •Ruby / JavaScript / HTML5 / Java などなど •HTML5とか勉強会 Staff •Eclipse => Vim => Sublime Text2 12年11月10日土曜日
- 3. Do you know Zen Coding ? 12年11月10日土曜日
- 7. Do you know Emmet ? 12年11月10日土曜日
- 8. What is Emmet ? • Zen Codingの進化版 • New features of Emmet (compared with old Zen Coding) • Dynamic CSS abbreviations, automatic vendor prefixes and gradient generator. • “Lorem Ipsum” generator • Implicit tag names • New Yandex’s BEM filter • Extensions support • New ^ operator • Various fixes and improvements https://github.com/sergeche/emmet-sublime 12年11月10日土曜日
- 9. Emmet for Sublime Text 2 plugin •Sublime Text2 で、Emmet 使えます。 •使ってみます。 12年11月10日土曜日
- 10. How to install ? • Use Package Control • Add Repository https://github.com/sergeche/emmet- sublime ctrl + shift + p => Package Control: Add Repository • Package Control: Install Package emmet-sublime • Restart ST2 editor (if required)New features of Emmet (compared with old Zen Coding) • だめなら手動でインストール。 git clone https://github.com/sergeche/emmet-sublime.git https://github.com/sergeche/emmet-sublime 12年11月10日土曜日
- 11. HTMLの雛形 html:5 [ctrl+e] を作る <!doctype html> <html lang="en"> html:5と入力後、 <head> ctrl+eで展開 <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 12年11月10日土曜日
- 12. .box>lorem [ctrl+e] <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolor quos accusantium minus totam excepturi aliquam voluptas impedit odit praesentium nobis at optio sed magnam quia iste expedita ipsam itaque. </div> 12年11月10日土曜日
- 13. style [ctrl+e] <style></style> 12年11月10日土曜日
- 14. -bdrs10-10-10-10 [ctrl+e] CSSはstyleタグの中かCSS ファイルで展開する -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; ベンダープリフィクスは必要に応じて付与さ れるみたい。例えば-oとか-msとか。 12年11月10日土曜日
- 15. -box-shadow10-10-10-#aaa [ctrl+e] -webkit-box-shadow: 10px 10px 10px #aaa; -moz-box-shadow: 10px 10px 10px #aaa; box-shadow: 10px 10px 10px #aaa; 色(#000)が、いまいちうまく展開されません。 #aaaはいいけど、#000はうまくいかない。 今後に期待…。 12年11月10日土曜日
- 16. -text-shadow5-5-5-#aaa [ctrl+e] -webkit-text-shadow: 5px 5px 5px #aaa; -moz-text-shadow: 5px 5px 5px #aaa; -ms-text-shadow: 5px 5px 5px #aaa; -o-text-shadow: 5px 5px 5px #aaa; text-shadow: 5px 5px 5px #aaa; 12年11月10日土曜日
- 17. m10+p10+bd+ [ctrl+e] margin: 10px; padding: 10px; border: 1px solid #000; 12年11月10日土曜日
- 18. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 10px 10px 10px #aaa; -moz-box-shadow: 10px 10px 10px #aaa; box-shadow: 10px 10px 10px #aaa; -webkit-text-shadow: 5px 5px 5px #aaa; -moz-text-shadow: 5px 5px 5px #aaa; -ms-text-shadow: 5px 5px 5px #aaa; -o-text-shadow: 5px 5px 5px #aaa; text-shadow: 5px 5px 5px #aaa; border: 1px solid #000; margin: 10px; padding: 10px; } </style> </head> <body> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolor quos accusantium minus totam excepturi aliquam voluptas impedit odit praesentium nobis at optio sed magnam quia iste expedita ipsam itaque. </div> </body> </html> 12年11月10日土曜日
- 19. 12年11月10日土曜日
- 20. config •tabでの展開は外したほうがいいかも。 他の動作を上書きしてしまうので。 "disable_tab_abbreviations": true •日本語の変換を確定すると入力文字が 消える。 "disable_formatted_linebreak": true 12年11月10日土曜日
- 21. Preferences => Settings - User { // tabでの展開の上書きしない for Emmet "disable_tab_abbreviations": true, // 改行でのフォーマットをしない // (日本語の確定のため) for Emmet "disable_formatted_linebreak": true } 12年11月10日土曜日
- 22. etc. • Zen Codingのプラグインはアンインストー ルか無効化しましょう。 • プラグインじゃないけどvintage有効にして ます。Vimっぽいことできます。command modeとinsert modeとか。 "vintage_ctrl_keys": true "vintage_start_in_command_mode": true 12年11月10日土曜日
- 23. Using Plugins • Emmet • https://github.com/sergeche/emmet- sublime • SublimeServer • https://github.com/learning/SublimeServer • HTTPサーバが上がる。 Ajaxの確認などに便利。 12年11月10日土曜日
- 24. Enjoy Sublime Text2! Enjoy Emmet! 12年11月10日土曜日