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

10.
2
育て
る

11.
?
Sublime Text 2/3

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

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

14.
２１
−
イ ターフ イ
ン
ェス
２２
−
セ テン
ッィグ
２３
−
パ ケージ
ッ
２４
−
キーバイ ド
ン

15.
セ テ ン （ユーザー）
ッィグ
Preferences > Setting - User
cmd + ,

16.
セ テ ン （ユーザー）
ッィグ
"auto_indent": true,
"draw_white_space": "all",
"font_size": 14.0,
"highlight_line": true,
"ignored_packages":
[
"Vintage",
],
"tab_size": 2,
"word_wrap": true
JSON形式
最後はカ
ンマな ！
し

17.
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'

18.
Package Control
cmd + shift + p
Install ↔ Remove
Enable ↔ Disable

19.
Package Control
Preferences > Browse Packages

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

21.
Package Install
ColorPicker
cmd + shift + c

22.
Package Install
SideBarEnhancements

23.
Package Install
Goto-CSS-Declaration
cmd + →
※行末 行頭移動 併用のため、
・
と
cmd + ↓↑に変更がおすすめ

24.
Package Install
AutoFileName
<img src="
images/
photo.jpg
...
"

25.
Package Install
Emmet

26.
Emmet
#content
<div id="content"></div>
mb30
margin-bottom: 30px;

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

28.
Project
WordPress
Sublime Text
Cmd + K > B
サイ
ドバー表示 / 非表示
Ctrl + A
サイ
ドバーに ォ ス
フ ーカ

29.
Key Bindings - Default
Cmd + C
現在の行を ピー
コ
Cmd + D
同一単語選択
Cmd + Click
マ
ルチカーソ
ル
Cmd + Opt + Drag
矩形選択
Cmd + Opt + 2
２ ラ に分割
カ ム
Cmd + Opt + [
タ
ブ移動

30.
Key Bindings - Default
Cmd + P
Goto Anything
Ctrl + G
行番号に移動
Cmd + /
コ ンアト
メト ウ
Cmd + F
検索
Cmd + Shift + F
置換
Cmd + Opt + F
置換 １ ァ ル）
（ フイ

31.
Key Bindings - User
Preferences > Key Bindings - User

32.
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"},

33.
セ テ ン （ユーザー）
ッィグ
"disable_formatted_linebreak": true,
"disable_tab_abbreviations": true,
"disabled_single_snippet_for_scopes": "",
"enable_emmet_keymap": true,
※SnippetのtabTrigger の併用のための設定
と

34.
Snippet
Tools > New Snippet
<snippet>
展開内容
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<tabTrigger>hello</tabTrigger>
</snippet>
tabシ ー カ ト
ョ トッ

35.
Snippet
Packages > User

36.
Theme & Color Scheme
Phoenix
Soda
Flatland

37.
3
使い分け
る

38.
Dreamweaver
オーサ ン
リ グ

39.
Dreamweaver
サイ の管理
ト

40.
Dreamweaver
デザイ ビュー
ン

41.
?
質疑応答

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

43.
Thank
you