Photoshopを起動。
『新規ファイル』で自分の作りたいサイトの幅と高さを指定。
↓
画像などを配置していく。コピー用紙などにレイアウト(サイトの設計図)のラフ画を描いて、サイズや空きのpixel数を決めておくと作業がスムーズにいきます、たぶん。
↓
『表示』の定規から『ガイドをひく』を選択。画像に沿うようにガイドをひいていきます。使いたい画像はガイドでくまなく周囲を囲みましょう。
↓
『スライス』ツールで欲しい画像の範囲を決める。『スライスツール』は『切り抜きツール』の上で左クリックを長押しで切り替えられます。
↓
『スライスツール』はクリック＆ドラッグで、切り取りたい大きさを決めます。大きさが決まったらドラッグを解除。
↓
全てスライスし終わったら、『ファイル』の『Web用に保存』を選択。『Web用に保存』ダイアログボックスが開き、画像が少し薄めに表示されます。
『スライス選択ツール』で画像をダブルクリックで画像の名前の編集などができます。
↓
設定し終わったら、『保存』をクリックします。『最適化ファイルを別名で保存』ダイアログボックスが開くので、『名前』はそのままで、『フォーマット』は『画像のみ』、『スライス』は『すべてのユーザー定義スライス』を選び、『保存』をクリックします。
↓
［場所］に指定したところにimagesフォルダ（初期設定時）が作成され、先ほど設定したファイル名とスライスに応じた画像が書き出されます。
(※『最適化ファイルを別名で保存』ダイアログボックスの『設定』で『その他』を選択すると、『出力設定』ダイアログボックスが開き、書き出しについて細かい設定ができます。)
↓ 『スライス』について詳しくはこちら
Adobe Bracketsを起動。
新規ファイルを別名で保存(拡張子.htmlをファイル名の後につけてhtmlファイルにする。※Bracketsはファイル名の後に拡張子をつける必要があるので気を付けましょう。)
↓
!(Shift+1)を入力した後、Tabキーを選択。<!DOCTYPE HTML>～</html>まで表示されます。
↓
Photoshopで作ったカンプデザインをもとにコーディングしていきます。画像はスライスでWeb用に保存したものを使っていきます。
下記サイトでAdobe Braketの使い方が紹介されてます。
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
↓ とりあえず、入れておきたいBracketsの拡張機能。
Documents Toolbar
- 上部に現在開いているファイルをタブ表示出来ます
Brackets File Icons
- ファイル名頭のアイコンを表示出来ます
Extensions Rating
HTML Hint
- HTMLのコードヒントを出す
MoreCSSCodeHint
- CSSのコードヒントを出す
CSSfier
- HTMLの構文をコピーして、sassファイルにペーストしただけでCSS構文にできます
HTML Wrapper
Inline Gradient Editor
CSSタグのGradientを作成時に「Ctrl＋E」でグラデーション作成ダイアログが出る
Emmet
- 展開は、コード末尾にカーソルがある状態でタブキーを押す
- Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
Sidebar Plus
- デフォルトでは閉じるか開くかしか出来ませんが、このプラグインにより「一時的に開く」ということが出来るようになります
Various improvements
- サブフォルダーの展開をすべて折りたたむ
- プロジェクト内での検索
など便利機能の追加
Code Folding
- ソースの折りたたみの機能を追加します
Brackets Bookmarks
- ソースコード内でCtrl+F4を押すことによりその行にブックマークを設定でき、F4を押すことでいつでもブックマーク箇所へジャンプ出来ます
Indent Guides
- インデントを表示してくれます
Overscroll
- ファイルの最終行より更に下方までスクロール出来るようになります
Paste and Indent
- ペーストしたコードを、自動的に正しくインデントしてくれます
Show Whitespace
- 半角スペースをSublimeText風に表示してくれます
String Convert
（右クリックで展開）
WD Minimap
- SublimeText風のミニマップを追加します
Whitespace Normalizer
- ファイル保存時に、不要なインデントを削除してくれます
CSSLint
- CSSLintの結果を保存時にリアルタイムに表示してくれます
HTML Block Selector
- 開始・終了タグどちらかにフォーカスが当たっている状態でCtrl+Shift+Tを押すと、対応するタグまでの範囲を選択してくれます
Custom Placehold.it image for Bracket
- Brackets内でダミー画像を作るためのウィンドウが出る
W3CValidation
- HTMLファイル保存時に、リアルタイムにバリデーションを実行してくれます
Brackets WordPress Hint
- BracketsでWordpressのコードヒントを出す
CanIUse
- Brackets内でCan I Useが開けるので、ブラウザ対応確認が簡単
- Ctrl＋Alt＋U
AutoPrefixer
- Can I Useを必要なCSSにはベンダープレフィックスを付与、場合によってはベンダープレフィックスを削除してくれる
Special Html Characters
- Alt+cでエンティティが必要な特殊文字を一覧表示してくれます
Beautify
- JavaScript、HTML、CSSを見やすいよう整形してくれます
- minファイル等を復元・解析する際に重宝します
Minifier
- CSS/JSをminify出来ます
JavaScript Globals
- JSコード内のグローバル変数を分かりやすく表示してくれます
- 変数がグローバルになっている場合、赤文字+下線で表示される
Interactive Linter
- JSHint/JSLint/CoffeeLintの結果をリアルタイムに表示してくれます
QuickDocsJS
- クイックドキュメント機能にJSのドキュメントを追加します
Theseus for Brackets
- Adobe製のJSデバッガーで、ライブプレビュー中のJSをリアルタイムで監視、デバッグすることが出来ます
- ファイル→Enable Theseusより、機能のON/OFFを制御します
- Adobe製のJavaScriptデバッガTheseusがすごい
PHP SmartHints
- PHPのコードヒントを表示してくれます
QuickDocsPHP
- クイックドキュメント機能にPHPのドキュメントを追加します
- ショートカットはデフォルトのCtrl+Kのまま
Brackets Color Palette
- Brackets内で開いている画像から、色を抽出出来ます
Brackets Color Picker
Swatcher
Brackets Color Palette
- Brackets内で開いている画像から、色を抽出出来ます
Unused Files
- プロジェクト内で使用していないファイルを検出出来ます
eqFTP
- 予めFTP設定をしておくと、ローカルのファイルを上書き保存したタイミングで自動的に指定のサーバー上の該当するディレクトリにアップロードしてくれます
Edge Inspect extension for Brackets and Edge Code
Brackets SASS
- BracketsでSassのリアルタイムライブプレビューを実現します
- BracketsでSassをライブプレビューする
SASSHints
- SASSのコードヒントを出す
Response for Brackets - original
