[Dreamweaver]作業効率が劇的にアップ!!ショートカットとコードスニペット

  CSS, HTML, WEB , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Dreamweaver

Dreamweaver を使用してコーディングしているとよく使う機能ってないですか?私の場合は「ソースコードのフォーマット」や「すべてを保存」などをよく使用します。使用する際に、メニューから選んだりしているとどうしても効率が悪くなってしまいます。そこで、基本的なショートカットの紹介や「ショートカットとコードスニペット」を設定して作業効率を向上させる方法についてご紹介したいと思います。

ショートカット

Dreamweaver を使用する上で主要なショートカットをご紹介したいと思います。

基本的なショートカット

まず初めに Dreamweaver に限らず、使用できるショートカットを下の表にご紹介したいと思います。

役割 Windows Mac
新規作成 Ctrl + N Command + N
開く Ctrl + O Command + O
閉じる Ctrl + W Command + W
すべて閉じる Ctrl + Shift + W Command + Shift + W
保存 Ctrl + S Command + S
別名で保存 Ctrl + Shift + S Command + Shift + S
取り消し Ctrl + Z,Alt + BackSpace Command + Z,Opt + BackSpace
やり直し Ctrl + Y,Ctrl + Shift + Z Command + Y,Command + Shift + Z
カット Ctrl + X Command + X
コピー Ctrl + C Command + C
ペースト Ctrl + V Command + V
すべて選択 Ctrl + A Command + A

タグ系ショートカット

もっとも使用頻度が高いと言える Dreamweaver ショートカットを下の表にご紹介したいと思います。

動作 Windows Mac
改行 <br> Shift + Enter Command + N
強調 <strong> Ctrl + N Command + B
斜体 <em> Ctrl + I Command + I
段落 <p> Ctrl + Shift + P Control + Shift + P
見出し h1~6 Ctrl + 1~6 Command + 1~6
段落・見出し解除 Ctrl + 0 Command + 0
画像の挿入 Ctrl + Alt + I Command + Opt + I
アンカーポイントの挿入 Ctrl + Alt + A Command + Opt + A
リンクの作成 Ctrl + L Command + L
リンクの削除 Ctrl + Shift + L Command + Shift + L
表の挿入 Ctrl + Alt + T Command + Opt + T
行の挿入 Ctrl + M Command + M
行の削除 Ctrl + Shift + M Command + Shift + M
列の挿入 Ctrl + Shift + A Command + Shift + A
列の削除 Ctrl + Shift + – Command + Shift + –
検索/置換 Ctrl + F Command + F
クイックタグ編集 Ctrl + T Command + T
半角スペースを挿入 Shift + Space Shift + Space
区切りなしスペースを挿入 Ctrl + Shift + Space Command + Shift + Space

検索/置換は検索/置換したい単語を選択した状態で呼び出すと、単語が入力された状態で表示されます。
デザインビューにおいてクイックタグ編集は押す回数によって[HTMLの挿入]・[タグの編集]・[折り返しタグ]の順に変化します。

移動・選択系ショートカット

知っていると違いがでる Dreamweaver ショートカットを下の表にご紹介したいと思います。

動作 Windows Mac
親要素選択 Ctrl + [ Command + [
子要素選択 Ctrl + ] Command + ]
行頭に移動 HOME HOME
行末に移動 END END
1単語左に移動 Ctrl + ← Command + ←
1単語右に移動 Ctrl + → Command + →
1単語左を選択 Ctrl + Shift + ← Command + Shift + ←
1単語右を選択 Ctrl + Shift + → Command + Shift + →

Dreamweaver のキーボードショートカットの設定

「初期状態・デフォルトのままでは使いづらい」という場合に、自分が使いやすいようにカスタマイズすることができます。また、ショートカットが割り当てられていない機能に割り当てる設定方法を下記にご紹介したいと思います。

Dreamweaver のキーボードショートカットの設定

まず、メニューバーの「編集」→「キーボードショートカット」を選択します。

Dreamweaver ショートカット スニペット

初期状態のショートカットとは別に自分用のショートカットを作成してカスタマイズするために、「セットの複製」を押して初期状態のショートカットを保持したまま複製します。

Dreamweaver ショートカット スニペット

現在のセットが「Dreamweaver Stabdard コピー」であることを確認して「コマンド」を設定したい機能がある場所を選択する。
例えば、メニューコマンドやスニペットなどを選択して使用します。

Dreamweaver ショートカット スニペット

ショートカットを割り当てたい項目を選択して、「+」をクリックして設定したいショートカットを入力します。

Dreamweaver ショートカット スニペット

ショートカットの設定例

今回はメニューバーの「コマンド」→「ソースフォーマットの適応」にショートカット「Ctrl + Shift + F」を割り当てたいと思います。

Dreamweaver ショートカット スニペット

「コマンド:メニューコマンド」、コマンド内の「ソースフォーマットの適応」を選択して「+」をクリックすることで入力状態となり、「Ctrl + Shift + F」を入力します。

Dreamweaver ショートカット スニペット

あとはOKを押せば完了です。
削除する際はショートカットを削除したい項目を選択して「-」を押すと削除でき、もしショートカットが重複しているときは警告が出るので注意が必要です。

コードスニペット

m-Schoolさんの「知らなきゃ損!Dreamweaverのスニペットを使おう!」には下記のように説明されています。

スニペット(snippet)とは、頻繁に使用するコード等をすぐに使えるように保存しておくことができる機能です。コードスニペットとも言われます。Dreamweaverだけではなく、コードを記述するようなソフトウェアにはよくある機能です。

知らなきゃ損!Dreamweaverのスニペットを使おう! – m-School

Dreamweaver のコードスニペットの使用

まず、メニューバーの「ウィンドウ」→「スニペット」を選択して表示させます。

Dreamweaver ショートカット スニペット コードスニペットの使用

登録されているスニペットをダブルクリックすることで使用することができます。

Dreamweaver ショートカット スニペット コードスニペットの使用

Dreamweaver のコードスニペットの追加

新規スニペット」を選択してダイアログを表示させます。

Dreamweaver ショートカット スニペット 新規スニペット

登録する任意の名前と説明を入力して、「スニペットの種類」を選択します。

Dreamweaver ショートカット スニペット スニペットの種類 選択範囲を囲む

スニペットの種類「選択範囲を囲む」を選択すると、「前に挿入」「後に挿入」が現れそれぞれに登録したいコードを入力します。

スニペットの種類「ブロックの挿入」を選択すると、「コードの挿入」が現れ登録したいコードを入力します。

Dreamweaver ショートカット スニペット スニペットの種類 ブロックの挿入

スニペットパネルのプレビューに「デザイン・コード」で表示するかを選択します。

追加したスニペットにもショートカットを割り当てることができ、「コマンド」を「スニペット」になるように選択して、設定したいスニペットを選択して割り当てることができます。

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

SNSでもご購読できます。

コメントを残す

*