WEBデザイナーのためのエディタ入門 先生：金澤 直毅
5 likes2,199 views
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/278/room ーーーーーーーーーーーーーーーーーーーーーーー
![セ テ ン （ユーザー）
ッィグ
"auto_indent": true,
"draw_white_space": "all",
"font_size": 14.0,
"highlight_line": true,
"ignored_packages":
[
"Vintage",
],
"tab_size": 2,
"word_wrap": true
JSON形式
最後はカ
ンマな ！
し](https://image.slidesharecdn.com/editorslide20131116-131116000033-phpapp02/85/WEB-18-320.jpg)
![Key Bindings - User
//Emmet Expand
{"keys": ["super+e"],
"args": {"action": "expand_abbreviation"},
"command": "run_emmet_action",
"context": [{"key": "emmet_action_enabled.expand_abbreviation"}]},
//Emmet Wrap
{"keys": ["shift+super+e"],
"command": "wrap_as_you_type",
"context": [{"operand": false,"operator": "equal","match_all": true,
"key": "setting.is_widget"},](https://image.slidesharecdn.com/editorslide20131116-131116000033-phpapp02/85/WEB-34-320.jpg)
![Snippet
Tools > New Snippet
<snippet>
展開内容
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<tabTrigger>hello</tabTrigger>
</snippet>
tabシ ー カ ト
ョ トッ](https://image.slidesharecdn.com/editorslide20131116-131116000033-phpapp02/85/WEB-36-320.jpg)
WEBデザイナーのためのエディタ入門 先生：金澤 直毅
- 1. ナー Webデザイ のためのエデ タ入門 ィ schoo WEB-campus 2013年11月16日 金澤直毅
- 3. ? テ ス エデ タ キト ィ
- 4. ? EDITOR
- 6. 1 知る
- 7. 選択肢 メ モ帳 テ ス エデ ッ キ ト ィト TeraPad Cot Editor サク ラエデ タ ィ mi 秀丸エデ タ ィ vi(m) Sublime Text emacs etc.
- 8. コ ピ ン ュータ の会話 と
- 9. ター ナル ミ pwd cd desktop mkdir site cd site touch index.html vi index.html open index.html
- 11. 2 育て る
- 13. “ The text editor you'll fall in love with
- 15. ２１ − イ ターフ イ ン ェス ２２ − セ テン ッィグ ２３ − パ ケージ ッ ２４ − キーバイ ド ン
- 17. セ テ ン （ユーザー） ッィグ Preferences > Setting - User cmd + ,
- 18. セ テ ン （ユーザー） ッィグ "auto_indent": true, "draw_white_space": "all", "font_size": 14.0, "highlight_line": true, "ignored_packages": [ "Vintage", ], "tab_size": 2, "word_wrap": true JSON形式 最後はカ ンマな ！ し
- 19. Package Control View > Show Console import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'
- 20. Package Control cmd + shift + p Install ↔ Remove Enable ↔ Disable
- 21. Package Control Preferences > Browse Packages
- 23. Package Install ColorPicker cmd + shift + p
- 30. Project WordPress Sublime Text Cmd + K > B サイ ドバー表示 / 非表示 Ctrl + A サイ ドバーに ォ ス フ ーカ
- 31. Key Bindings - Default Cmd + C 現在の行を ピー コ Cmd + D 同時選択 Cmd + Click マ ルチカーソ ル Cmd + Opt + drag 矩形選択 Cmd + Opt + 2 ２ ラ に分割 カ ム Cmd + Opt + [ タ ブ移動
- 32. Key Bindings - Default Cmd + P Goto Anything Ctrl + G 行番号に移動 ctrl + / コ ンアト メト ウ Cmd + F 検索 Cmd + Shift + F 置換 Cmd + Opt + F 置換 １ ァ ル） （ フイ
- 33. Key Bindings - User Preferences > Key Bindings - User
- 34. Key Bindings - User //Emmet Expand {"keys": ["super+e"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}, //Emmet Wrap {"keys": ["shift+super+e"], "command": "wrap_as_you_type", "context": [{"operand": false,"operator": "equal","match_all": true, "key": "setting.is_widget"},
- 35. セ テ ン （ユーザー） ッィグ "disable_formatted_linebreak": true, "disable_tab_abbreviations": true, "disabled_single_snippet_for_scopes": "", "enable_emmet_keymap": true,
- 36. Snippet Tools > New Snippet <snippet> 展開内容 <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <tabTrigger>hello</tabTrigger> </snippet> tabシ ー カ ト ョ トッ
- 38. Theme & Color Scheme Phoenix Soda Flatland
- 39. 3 使い分け る
- 40. Dreamweaver
- 43. ? 質疑応答
- 44. ? レポー 課題 ト エデ タ ィ に恋す る理由
- 45. Thank you