はじめてのemmet with sublime text2
DESCRIPTION
はじめてのEmmet with Sublime Text2TRANSCRIPT
はじめてのEmmetwith Sublime Text2
2012/11/07第0回 Sublime Text2 勉強会 @C.A.Mobile
ひらい さだあき
12年11月10日土曜日
Profile
•ひらい さだあき ( @sada_h / techlog )
•エンジニア•Ruby / JavaScript / HTML5 / Java などなど
•HTML5とか勉強会 Staff
•Eclipse => Vim => Sublime Text2
12年11月10日土曜日
Do you knowZen Coding ?
12年11月10日土曜日
http://code.google.com/p/zen-coding/
12年11月10日土曜日
http://www.atmarkit.co.jp/fwcr/design/tool/zencoding01/01.html
12年11月10日土曜日
https://chrome.google.com/webstore/detail/zen-coding-textarea-exten/iodhcpffklplnfaihoolhfbejbinhcgn
12年11月10日土曜日
Do you know Emmet ?
12年11月10日土曜日
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日土曜日
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-sublimectrl + 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日土曜日
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
html:5 [ctrl+e] HTMLの雛形を作る
html:5と入力後、ctrl+eで展開
12年11月10日土曜日
<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>
.box>lorem [ctrl+e]
12年11月10日土曜日
<style></style>
style [ctrl+e]
12年11月10日土曜日
-webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px;
-bdrs10-10-10-10 [ctrl+e]
CSSはstyleタグの中かCSSファイルで展開する
ベンダープリフィクスは必要に応じて付与されるみたい。例えば-oとか-msとか。
12年11月10日土曜日
-webkit-box-shadow: 10px 10px 10px #aaa;-moz-box-shadow: 10px 10px 10px #aaa;box-shadow: 10px 10px 10px #aaa;
-box-shadow10-10-10-#aaa [ctrl+e]
色(#000)が、いまいちうまく展開されません。#aaaはいいけど、#000はうまくいかない。
今後に期待…。
12年11月10日土曜日
-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;
-text-shadow5-5-5-#aaa [ctrl+e]
12年11月10日土曜日
margin: 10px;padding: 10px;border: 1px solid #000;
m10+p10+bd+ [ctrl+e]
12年11月10日土曜日
<!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日土曜日
12年11月10日土曜日
config
•tabでの展開は外したほうがいいかも。他の動作を上書きしてしまうので。"disable_tab_abbreviations": true
•日本語の変換を確定すると入力文字が消える。"disable_formatted_linebreak": true
12年11月10日土曜日
{ // tabでの展開の上書きしない for Emmet
"disable_tab_abbreviations": true, // 改行でのフォーマットをしない // (日本語の確定のため) for Emmet "disable_formatted_linebreak": true}
Preferences => Settings - User
12年11月10日土曜日
etc.
•Zen Codingのプラグインはアンインストールか無効化しましょう。
•プラグインじゃないけどvintage有効にしてます。Vimっぽいことできます。command
modeとinsert modeとか。"vintage_ctrl_keys": true"vintage_start_in_command_mode": true
12年11月10日土曜日
Using Plugins
•Emmet
•https://github.com/sergeche/emmet-sublime
•SublimeServer
•https://github.com/learning/SublimeServer
•HTTPサーバが上がる。Ajaxの確認などに便利。
12年11月10日土曜日
Enjoy Sublime Text2!
Enjoy Emmet!
12年11月10日土曜日