はじめてのEmmet                  with Sublime Text2                           2012/11/07               第0回 Sublime Text2 勉強会 @C...
Profile      •ひらい さだあき ( @sada_h / techlog )      •エンジニア      •Ruby / JavaScript / HTML5 / Java などなど      •HTML5とか勉強会 Staff...
Do you know               Zen Coding ?12年11月10日土曜日
http://code.google.com/p/zen-coding/12年11月10日土曜日
http://www.atmarkit.co.jp/fwcr/design/tool/zencoding01/01.html12年11月10日土曜日
https://chrome.google.com/webstore/detail/zen-coding-textarea-exten/iodhcpffklplnfaihoolhfbejbinhcgn12年11月10日土曜日
Do you know                 Emmet ?12年11月10日土曜日
What is Emmet ?               •   Zen Codingの進化版               •   New features of Emmet (compared with old Zen Coding)   ...
Emmet for Sublime Text 2 plugin               •Sublime Text2 で、Emmet 使えます。               •使ってみます。12年11月10日土曜日
How to install ?               • Use Package Control                • Add Repository https://github.com/sergeche/emmet-   ...
HTMLの雛形                      html:5 [ctrl+e]                                             を作る          <!doctype html>     ...
.box>lorem [ctrl+e]          <div class="box">          Lorem ipsum dolor sit amet,          consectetur adipisicing elit....
style [ctrl+e]               <style></style>12年11月10日土曜日
-bdrs10-10-10-10 [ctrl+e]                          CSSはstyleタグの中かCSS                             ファイルで展開する   -webkit-borde...
-box-shadow10-10-10-#aaa [ctrl+e]       -webkit-box-shadow: 10px 10px 10px #aaa;       -moz-box-shadow: 10px 10px 10px #aa...
-text-shadow5-5-5-#aaa [ctrl+e]         -webkit-text-shadow: 5px 5px 5px #aaa;         -moz-text-shadow: 5px 5px 5px #aaa;...
m10+p10+bd+ [ctrl+e]          margin: 10px;          padding: 10px;          border: 1px solid #000;12年11月10日土曜日
<!doctype html>               <html lang="en">               <head>                   <meta charset="UTF-8">              ...
12年11月10日土曜日
config               •tabでの展開は外したほうがいいかも。                他の動作を上書きしてしまうので。                "disable_tab_abbreviations": true ...
Preferences => Settings - User          {               // tabでの展開の上書きしない for Emmet               "disable_tab_abbreviatio...
etc.               • Zen Codingのプラグインはアンインストー                ルか無効化しましょう。               • プラグインじゃないけどvintage有効にして          ...
Using Plugins               • Emmet                • https://github.com/sergeche/emmet-                   sublime         ...
Enjoy Sublime Text2!                  Enjoy Emmet!12年11月10日土曜日
Upcoming SlideShare
Loading in …5
×

はじめてのEmmet with Sublime Text2

11,435 views

Published on

はじめてのEmmet with Sublime Text2

Published in: Technology
1 Comment
21 Likes
Statistics
Notes
  • Thank you for the information. I was looking for custom sublimation on furniture and recently found this awesome site.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
11,435
On SlideShare
0
From Embeds
0
Number of Embeds
6,042
Actions
Shares
0
Downloads
36
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

はじめてのEmmet with Sublime Text2

  1. 1. はじめてのEmmet with Sublime Text2 2012/11/07 第0回 Sublime Text2 勉強会 @C.A.Mobile ひらい さだあき12年11月10日土曜日
  2. 2. Profile •ひらい さだあき ( @sada_h / techlog ) •エンジニア •Ruby / JavaScript / HTML5 / Java などなど •HTML5とか勉強会 Staff •Eclipse => Vim => Sublime Text212年11月10日土曜日
  3. 3. Do you know Zen Coding ?12年11月10日土曜日
  4. 4. http://code.google.com/p/zen-coding/12年11月10日土曜日
  5. 5. http://www.atmarkit.co.jp/fwcr/design/tool/zencoding01/01.html12年11月10日土曜日
  6. 6. https://chrome.google.com/webstore/detail/zen-coding-textarea-exten/iodhcpffklplnfaihoolhfbejbinhcgn12年11月10日土曜日
  7. 7. Do you know Emmet ?12年11月10日土曜日
  8. 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-sublime12年11月10日土曜日
  9. 9. Emmet for Sublime Text 2 plugin •Sublime Text2 で、Emmet 使えます。 •使ってみます。12年11月10日土曜日
  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-sublime12年11月10日土曜日
  11. 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. 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. 13. style [ctrl+e] <style></style>12年11月10日土曜日
  14. 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. 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. 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. 17. m10+p10+bd+ [ctrl+e] margin: 10px; padding: 10px; border: 1px solid #000;12年11月10日土曜日
  18. 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. 19. 12年11月10日土曜日
  20. 20. config •tabでの展開は外したほうがいいかも。 他の動作を上書きしてしまうので。 "disable_tab_abbreviations": true •日本語の変換を確定すると入力文字が 消える。 "disable_formatted_linebreak": true12年11月10日土曜日
  21. 21. Preferences => Settings - User { // tabでの展開の上書きしない for Emmet "disable_tab_abbreviations": true, // 改行でのフォーマットをしない // (日本語の確定のため) for Emmet "disable_formatted_linebreak": true }12年11月10日土曜日
  22. 22. etc. • Zen Codingのプラグインはアンインストー ルか無効化しましょう。 • プラグインじゃないけどvintage有効にして ます。Vimっぽいことできます。command modeとinsert modeとか。 "vintage_ctrl_keys": true "vintage_start_in_command_mode": true12年11月10日土曜日
  23. 23. Using Plugins • Emmet • https://github.com/sergeche/emmet- sublime • SublimeServer • https://github.com/learning/SublimeServer • HTTPサーバが上がる。 Ajaxの確認などに便利。12年11月10日土曜日
  24. 24. Enjoy Sublime Text2! Enjoy Emmet!12年11月10日土曜日

×