Dreamweaverの基本的なショートカットMac編(CC2017対応)

DreamWeaver CC2017
DreamWeaver CC2017

コーディングに便利なショートカット一覧を仕事用の資料として公開していますが、DreamWeaverのバージョンCC 2017で、特にコーダーがSublimeライクに大幅に便利になったとのことで、早速更新しました。DW CC2017対応箇所には分かりやすくCC2017マークを記しています。
DW標準のショートカットにないコマンドは、環境設定でショートカット登録するのが便利。例えば、テーブル挿入はあるがリスト挿入が見当たらないので、79にカスタム登録した。

スポンサードリンク

ここではまだ紹介していないが、EMMET(例えば「ul>li*5>a」などと入力後TABボタンで変換してくれる入力支援機能)やスニペット(favicon、mailto、などと入力しTAB変換しただけで、インプットを完了してくれる入力支援機能)も非常に強力なので、ぜひ試してみることをお勧めします。
便利なもの見つけ次第ここにどんどん追加。(⭐マークは特に便利な項目)

HTML編集

(Windowsの場合  → ctrloptalt)

コーディング ショートカット
<p> ⭐ + shift + p
<br> shiftenter
<strong> + B
<em> + I
見出し 1 + 1
見出し 2 + 2
見出し 3 + 3
見出し 4 + 4
見出し 5 + 5
見出し 6 + 6
スタイルなし ⭐ 0
イメージ挿入 Alt + I
テーブル挿入 + Alt + T
テーブル:行の挿入 + M
テーブル:列の挿入 + Shift + A
テーブル:行の削除 + Shift + M
テーブル:列の削除 + Shift +
リストを入れ子にする 入れ子にしたいものを選択し、「インデントボタン」をクリック
Ctrl+tab
パレット表示の有無 F4
ファイルパレット表示の有無 ⭐ F8
1行複製 ⭐  + D
環境設定ダイアログを開く  + U
検索/置換ダイアログを開く  + F
ページプロパティダイアログを開く  + J
タグの挿入 ⭐  + T (クイックTAGモード)
※デザインビューではT連投でモード変更、タグの入れ替え容易に
CSSクイック編集CC2017 ⭐  + E (クイックCSSモード)
※変更したい要素(あるいはクラス名)をクリックした状態で、CSSをその場で編集
親要素選択  + [
半角スペースを挿入 Shift + Space
&nbsp;を挿入 Ctrl + Shift + Space
インデントCC2017 ⭐ + Option + ]
※要英数入力モード
インデント削除CC2017 ⭐ + Option + [
※要英数入力モード
リアルタイムプレビュー ⭐ Option + F12

選択・移動系

(Windowsの場合  → ctrloptalt)

コーディング ショートカット
親タグ選択 ⭐  + [
子タグ選択  + ]
行頭にカーソル移動 HOME
行末にカーソル移動 ⭐ END
1単語左にカーソル移動 ⭐ opt+
1単語右にカーソル移動 ⭐ opt +
1単語左を選択  + Shift +
1単語右を選択  + Shift +
その行を1行上に移動CC2017  + ctrl +
その行を1行下に移動CC2017  + ctrl +
タブ切り替え ⭐  + @
ソースコード切り替え ⭐ 各ソースコードボタンを右クリックし「別ファイルとして開く」を選択したあと、タブを切り替えるショートカットを流用する(。公式のショートカットはないっぽいので、わかるまでこれで代用)
 + @

Dreamweaver CS4 アイコン
これらはデフォルトで設定されているショートカットキーで、これはこれで便利ですが、Dreamweaver コーディングのキモは、ショートカットを自由にカスタマイズできること。デフォルトには設定がないショートカットを自分で登録していけば、さらに使いやすくなります。よく使う要素などをスニペットやライブラリに登録して、ショートカットで登録したスニペットを呼び出すようにすれば、最強レベルのコードエディタになります。
ただし、ライブラリはbody外では使用できない点ご注意を。(ライブラリはスニペットとちがって、一括変更ができる)

スポンサードリンク

この記事を書いた人

mojigumi

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