ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/278/room ーーーーーーーーーーーーーーーーーーーーーーー

1. ナー
Webデザイ のためのエデ タ入門
ィ
schoo WEB-campus
2013年11月16日
金澤直毅

2. Naoki Kanazawa
http://designless.net

3. ?
テ ス エデ タ
キト ィ

4. ?
EDITOR

5. 1
知る
2
育て
る
3
使い分け
る

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
育て
る

12. ?
Sublime Text 2/3

13. “
The text editor
you'll fall in love with

14. 素材のダウ ロー
ン ド
http://designless.net/data/schoo20131116.zip

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

22. Package Install
BracketHighliter
<div>
<p>text</p>
</div>

23. Package Install
ColorPicker
cmd + shift + p

24. Package Install
SideBarEnhancements

25. Package Install
Goto-CSS-Declaration
cmd + →

26. Package Install
AutoFileName
<img src=“
images/
photo.jpg
...
”

27. Package Install
Emmet

28. Emmet
#content
<div id=“content”></div>
mb30
margin-bottom: 30px;

29. Package Install
ConvertToUTF8
BrowerRefresh
CSSComb
jQuery
SyncedSideBar
WordPress
SFTP
Sass
Terminal
Markdown Preview
etc.

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シ ー カ ト
ョ トッ

37. Snippet
Packages > User

38. Theme & Color Scheme
Phoenix
Soda
Flatland

39. 3
使い分け
る

40. Dreamweaver

41. Dreamweaver
サイ の管理
ト

42. Dreamweaver
デザ ン ュー
イビ

43. ?
質疑応答

44. ?
レポー 課題
ト
エデ タ
ィ に恋す
る理由

45. Thank
you