Adobe Bracketsのショートカットでコーダー乗り換えに慣れる

Adobe Brakets

コーダーアプリ「Sublime Text」から「Adobe Brackets」に乗り換えるための基本的なショートカットを図表にしました。後半にEMMETショートカットがあり、非常に強力なキーが集中している。これを覚えて操作を早くなるとキー入力もサクサク楽しくなる。(※特に便利なものは⭐でマークした)

スポンサードリンク

基本

コマンド名ショーットカット
取り消し⌘+z
やり直し(Brackets)⌘+y

アプリ

コマンド名ショーットカット
サイドバーを表示する⌘ + alt + h
Cmd + shift + h(Mac)
サイドバー・ツールバー表示切替⌘ + shift + 2
拡張機能付きでリロードF5
Cmd + r(Mac)
拡張機能なしでリロードShift + F5
Cmd + ⌘ + r(Mac)
開発者ツールを表示F12
Cmd + alt + r(Mac)

表示

コマンド名ショーットカット
フォントサイズを大きく⌘ + +
Cmd + shift + +(Mac)
フォントサイズを小さく⌘ + –
フォントサイズを元に戻す⌘ + 0

ライブプレビュー

コマンド名ショーットカット
ライブプレビュー⌘ + alt + p
ライブプレビューを強制的に再読込み⌘ + shift + r
ライブプレビューハイライト⌘ + shift + c

選択

コマンド名ショーットカット
すべて選択⌘ + a
行の選択⌘ + L
※Macは初期状態で割り当てなし(Cmd + Lは「行に移動」に使用)
複数選択 ⭐⌘ + b または ⌘-左ドラッグ
複数選択を取り消し⌘ + u
選択範囲をスキップ⌘ + shift + b
全てを複数選択 ⭐Alt + F3
⌘ + control + g(Mac)
次の行にカーソルを追加Alt + shift + ↓
前の行にカーソルを追加Alt + shift + ↑
矩形選択
不明
Alt-左ドラッグ
選択範囲を行に分ける⌘ + alt + L

コーディング

コマンド名ショーットカット
コードヒントを表示⌘ + Space
パラメーターヒントを表示⌘ + shift + Space
クイック編集⌘ + e
新規ルール⌘ + alt + n
※HTMLのクイック編集時の「新規ルール」のショートカットです
クイックドキュメント⌘ + k
行コメントの切り替え⌘ + /
ブロックコメントの切り替え⌘ + shift + /
Cmd + alt + /(Mac)
インデント⭐⌘ + ]
インデント解除 ⭐⌘ + [
行を複製⌘ + d
行を削除⌘ + shift + d
行を上に移動⌘ + shift + ↑
Cmd + ↑(Mac)
行を下に移動⌘ + shift + ↓
Cmd + ↓(Mac)
上の行を開く⌘ + shift + Enter
下の行を開く⌘ + Enter
前の区切りまで削除⌘ + Backspace
Alt + delete(Mac)
次の区切りまで削除⌘ + delete
Alt+ fn + delete(Mac)
すべて折りたたむAlt + 1
⌘ + 1(Mac)
すべて展開Alt + shift + 1
⌘ + shift + 1(Mac)
現在のコードをたたむ⌘ + alt + [
現在のコードを展開⌘ + alt + ]

キャレット移動

コマンド名ショーットカット
1 行上にスクロール⌘ + ↑
Cmd + alt + ↑(Mac)
1 行下にスクロール⌘ + ↓
Cmd + alt + ↓Mac)
文書の先頭へ⌘ + home
⌘ + ↑(Mac)
文書の末尾へ⌘ + →
⌘ + ↓(Mac)
行に移動⌘ + end
Cmd + L(Mac)
前の区切りへ⌘ + ←
Alt + ←(Mac)
※公式に記載あり動作するが、コマンドIDはエラー有
次の区切りへ⌘ + →
Alt + →(Mac)※公式に記載あり動作するが、コマンドIDはエラー有
行の先頭へAlt + ←
Cmd + →(Mac)※公式に記載あり動作するが、コマンドIDはエラー有
行の末尾へAlt + →
Cmd–→(Mac)※公式に記載あり動作するが、コマンドIDはエラー有
最初のエラーまたは警告に移動F8
Cmd + ‘(Mac)

検索・置換

コマンド名ショーットカット
検索⌘ + f
ファイルを横断して検索⌘ + shift + f
次を検索F3
Cmd + g(Mac)
前を検索Shift + F3
Cmd + shift + g(Mac)
定義をクイック検索⌘ + t
置換⌘ + h
Cmd + alt + f(Mac)
ファイルを横断して置換⌘ + shift + H
Cmd + alt + shift + f(Mac)
次の候補に移動Alt + ↓
前の候補に移動Alt + ↑
定義にジャンプ⌘ + j
※JavaScript内で使用します

ファイル操作

コマンド名ショーットカット
新規作成⌘ + n
開く…⌘ + o
フォルダーを開く…⌘ + alt + o
最近使用したファイルを開く…Alt + o
最近使用したプロジェクトを表示⌘ + alt + r
閉じる⌘ + w
すべて閉じる⌘ + shift + w
保存⌘ + s
すべて保存⌘ + alt + s
名前を付けて保存…⌘ + shift + n
ファイル名変更F2
前の文書(使用順)⌘ + shift + Tab
Cmd + shift + [(Mac)
次の文書(使用順)⌘+ Tab
Cmd + shift + ](Mac)
前の文書(並び順)⌘ + PageUp
Cmd + fn + ↑(Mac)
次の文書(並び順)⌘ + PageDown
Cmd + fn + ↓(Mac)
クイックオープン⌘ + shift + 0

スポンサードリンク

EMMETショートカット

コマンド名ショートカット
HTML雛形セット⭐! + tab
100+50(計算=150)⭐⌘ + shift + y
タグ境界選択内側から:⌘ + opt + b
外側から:⌘ + opt + sift + b
開始、終了タグ間移動⌘ + shift + t
1行化⌘ + shift + m
類似プロパティ一括変更⌘ + opt + r
開始・終了タグ一括削除⭐⌘ + shift + k
開始・終了タグ同時編集⭐⭐⌘ + shift + i
空タグ⇄有タグ⌘ + shift + j
任意タグで囲む⭐⌘ + shift + a
この操作はリアルタイムEmmet入力になっていて完了後のtabキー不要
数値増減⭐⌘ + shift + ⇅(x1)
⌘ + opt + ⇅(x10)
⌘ + shiftopt  + ⇅(x0.1)

EMMETの基本

EMMETを覚えるととても少ないキーでタグ構文入力を完了できる。EMMETプラグインはBrancketのアドオンで簡単にインストールできる。

EMMETテキストtab入力後
h1.logo<h1 class=”logo”></h1>
a[href=”/”].link<a href=”/” class=”link”></a>
.header>h1>a{ロゴ}<div class=”header”>
<h1><a href=””>ロゴ</a></h1>
</div>
img[src=”img_$$.png”]*3<img src=”img_01.png” alt=””>
<img src=”img_02.png” alt=””>
<img src=”img_03.png” alt=””>

EMMET書き方のルール

概要書き方サンプル
要素Earticle
IDの指定E#id#header
classの指定E.classa.link
属性の指定E[attr]a[href=”/”]
階層を下げるE>eh1>a
階層を上げるE>e^ph1>a^p
隣接する要素E+E.header>h1+p
子要素E+dl+
要素の複製E*nul>li*3
連番$*nul>.menu$*3>a
テキスト挿入{text}p{text}

応用

ショートカットtab入力後
.comment>h1|c<div class=”comment“>
<h1></h1>
</div>
<!– /.comment –>
.entyty>h1|e&lt;div class=”entyty”&gt;
&lt;h1&gt;&lt;/h1&gt;
&lt;/div&gt;
.1line>h1|s<div class=”1line“><h1></h1></div>

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
専門は企画・出版・編集・印刷、Webデザインと管理。最近はブログ、動画、3DCG、AR、LINEスタンプ等のコンテンツ配信にも力をいれ、自分自身もランニングアートでコンテンツ化に努めています。