SaCSS vol.56 こんなに素敵なBrackets!
-
Upload
atsushi-handa -
Category
Technology
-
view
454 -
download
3
Transcript of SaCSS vol.56 こんなに素敵なBrackets!
半田 惇志 @assialiholic(この背景のアイコンの人↓ )
Web制作会社 イデアシーディー勤務
肩書はWebクリエイター
梶浦由記さん(Kalafina)とか、妖精帝國の音楽がすき。
あとBracketsがすき。ということで。
2
プレーンエディタ < Brackets < IDE
単なるテキストエディタよりは高機能だが、IDEほど機能は多くなくまた動作も重くない。
とてもバランスが良く、シンプルなテキストエディタと高機能なIDEのちょうど良い中間あたりの使い心地。
7
ライブプレビュー
11
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択
クイックエディット
14
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択
ホバークイックビュー
21
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択
プロジェクトのルート化
26
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択
複数選択
30
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択
PSD Extract
Brackets内にPSDを読み込んでしまうエクステンション。
各レイヤーの属性値やスタイルをCSSで直接取得出来る。
レイヤーをその場でスライスしHTMLに画像として反映させることも可能。
35
Adobe Edge Inspect CC
PCとスマホのブラウザを同期させるAdobe CCの開発ツール。
HTML・CSS・JavaScript の変更をリアルタイムで確認可能なほか、スマホのブラウザをPCからデバック可能。
無償利用可、Chromeエクステンションも有り。
38
Theseus for Brackets
JSをリアルタイムで監視、デバッグするAdobe製のJSデバッガ。
ライブプレビュー中の関数コールを追跡し、関数に渡された引数や保持しているオブジェクトを確認することが出来る。
43
for more info
http://qiita.com/assialiholic/items/c8137321c7599a168b16
48