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

コマンド名 ショートカット
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書き方のルール

概要 書き方 サンプル
要素 E article
IDの指定 E#id #header
classの指定 E.class a.link
属性の指定 E[attr] a[href=”/”]
階層を下げる E>e h1>a
階層を上げる E>e^p h1>a^p
隣接する要素 E+E .header>h1+p
子要素 E+ dl+
要素の複製 E*n ul>li*3
連番 $*n ul>.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

mojigumiの代表、コウです。
主に広告デザインを中心に、企画・出版・編集・印刷、Web制作をしています。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします