[DreamWeaver CC]コーディングが捗るショートカットと機能

DreamWeaverはCCにバージョンアップされてからかなり機能が充実していますね。標準でSass,LESSに対応したり、Emmetが使えるようになってます。

Sublime Text3は使いやすいと人気のエディタですが、DreamWeaverもバージョンアップして活躍する場面が増えています。個人的には画面を分割してデザインを確認しながらコーディングしたいときには便利だなと感じています。

DreamWeaverを使っているときにショートカットを知っていればもっと便利になってコーディング作業効率が向上すること間違いなし。DreamWeaverでよく使うショートカットのいくつかと便利な機能・設定をメモしておきます。

クイック編集 Cmd + E / Ctrl + E

タグ、class,IDにカーソルを合わせると付随するCSSが編集できる

行をあける Cmd + Shift + Enter

[Win] Crtl + Shift + Enter
[Mac] Cmd + Shift + Enter

カーソルをおいた上の行を1行あける（追加する）

マルチカーソル（縦方向）Opt + クリックしてドラッグ

[Win] Alt + クリックしてドラッグ
[Mac] Opt + クリックしてドラッグ

縦方向に複数選択して一括でタグ編集できる

マルチカーソル（連続してないタグ）Cmd + クリック

[Win] Ctrl + クリック
[Mac] Cmd + クリック

複数のタグを選択して一括編集できる

Commandキーを押しながらタグをクリックすると

離れた場所にあるタグでも一括で編集できる

コメント化 Cmd + /

[Win] Ctrl + /
[Mac] Cmd + /

選択した行をコメント化する

行を複製 Cmd + D

[Win] Ctrl + D
[Mac] Cmd + D

選択した行を複製する

行を削除 Cmd + Shift + D

[Win] Ctrl + Shift + D
[Mac] Cmd + Shift + D

選択した行を削除

タグで囲む Cmd + T

[Win] Ctrl + T
[Mac] Cmd + T

選択した語句をタグで囲む

Emmet

DreamweaverでEmmetが使えます。

table>(tr>th+(td*3))*4

Tabで展開すると

Dreamweaverは機能が豊富で使いこなすのはなかなか大変ですが、ショートカットや便利な機能を覚えておけば、コーディング作業も効率アップすること間違いなしです。

Dreamweaverの基本を抑えるのに最適な書籍

デザインの学校 これからはじめるDreamweaverの本[2019年最新版]

ちょっと古いですが、初心者向けの丁寧な説明がされています。

初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉

ウェブサイト製作の実際の製作過程に沿って画像素材や配色、メディアクエリーなど、HTML・CSSの基礎と実践的な知識を身につけられます。