Dreamweaverの便利なショートカット

公開日：2020.10.05

Web制作

皆さんショートカットって使ってますか？
結構知ってるつもりで知らないこともあるショートカット。
Dreamweaverには色々なショートカットが設定されていますが、全部知ってて使いこなしてる人はそんなに多くないんじゃないでしょうか。

編集 > 環境設定からショートカットは確認できますし、「Dreamweaver ショートカット」で検索すると山ほどのショートカットが出てきますが、その数あるショートカットの中でも私が便利だなと思い好んで使っているものをいくつか紹介します。

バージョンは記事を書いている時点でのCCの最新（20.2）、キーはwindowsとして書いてます。
Macだったらctrlがcommandになる、とかだと思います。多分。

タグ出力

半角英数の後にtabキー

半角英数を入力後にtabキーを押すだけでタグが出力されます。
例えば、「div」と打ってtabキーを押すと、こう出力されます。

どんなタグでも使えます。これが地味に便利。
また、タグ自体を判断しているので閉じタグが無いタグでは閉じタグは出ませんし、必須の要素があればそれも一緒に出力されます。
例えば、「img」の後にtabキーを押すと、このように出力されます。

しかも、カーソルがsrc要素の中に移動してるのが便利。

スニペット

Dreamweaverには予め定型文を出力するためのスニペットという機能がありますが、これに新たに登録することにより自作の出力用ショートカットを作ることができます。

例えばdivをショートカットで出力するには先ほどの項目では「div」とtabキーでしたが、このように登録すれば、「d」1文字とtabキーで同じコードが出せます。

もちろんもっと長いものを登録することもできます。
例えば下記のようにすれば、「dl」とtabキーでdl、dt、ddがいっぺんに出力できます。

tableを登録するもよし、もちろんcss、php、javascript等の記述を入れることもできます。

hタグ、pタグ、brタグ出力

h1～h6: ctrl+1～6
p: ctrl+shift+p
br: shift+enter

この辺りは勿論最初に挙げたようなtabキーの方法でもいいんですが、Dreamweaverではじめからショートカットが用意されてます。
私は慣れてるのでこれでやる癖になってます。
hタグとpに関しては、すでに打ってある文字列を選択して囲むとその前後に開始タグと閉じタグが付くので便利です。

複製

ctrl+D

windowsでは削除のショートカットなのでちょっとやりにくいですが、Dreamweaverでは複製の機能になってます。

文書内にカーソルを置いてctrl+Dを押すと、その行が複製されます。
複数行を選択してctrl+Dを押すと、選択範囲が丸ごと複製されます。
ファイルを選択してctrl+Dを押すと、ファイルが複製されます。

コピー＆ペーストでも出来る動作ですが、クリップボードを使わないのが個人的に便利だと思っている部分です。
何かペーストしたいものがクリップボードにある場合には新たにコピーしたくないですからね。

親タグの選択

Ctrl+[

どこかソース上にカーソルを置いて、Ctrl+[を押すと親タグを選択します。
もう一度押すとさらに親のタグを選択。
ブロックごとにコピーしたい場合なんかに便利。

これはソース下のタグをクリックしても同じ事ができます。

いかがでしょうか。
ctrl+F4（検索）とかctrl+N（新規ファイル作成）とかの常識やろ、みたいなやつは省いてますが、もし知らなければそのあたりから調べなおすと非常に快適に作業ができるかと思いますよ！

この記事を書いた人

digrart編集部

大阪市中央区にて2009年よりWeb制作・運用支援を行い、1,000件以上の実績を持つWeb制作会社「digrart（ディグラート）」編集部が、本記事を執筆・監修しています。
現場で培った豊富な知見を活かし、Webサイト制作、ECサイト制作、SEO対策、Webコンサルティングの実践的なハウツーをお届けします。
初心者からプロまで、Web戦略の成功をサポートする実務ベースの情報が満載です。