記事の詳細

ショートカットの設定

環境設定は「編集>環境設定」

Mac:Command + U
Windows:Ctrl + U

キーボードショートカットは「編集>キーボードショートカット」で編集が可能です。

 

インデントの設定

インデント
Mac:Command + Shift + > or Command + Opt + ] Windows:Ctrl + Shift + > or Ctrl+Alt + ]

インデント解除
Mac:Command+Shift + < or Command + Opt + [
Windows:Ctrl + Shift + < or Ctrl + Alt + [

 

インデントは「編集>環境設定>コードフォーマット」で変更することが出来ます。

Dreamweaverショートカット インデント

 

 

Emmetの省略記法

Emmetとは、HTMLをより素早く編集できるプラグインで、Dreamweaverにはデフォルトで搭載されています。

例えば、

div#page>div.logo+ul#navigation>li*5>a

と打ったあとにtabキーを押して生成されるhtmlは以下のようになります。

Dreamweaverショートカット Emmet

section.mainarea>div.flex>div.width50*2>img.thumbnail

Dreamweaverショートカット Emmet

 

CSSのクラス付けをするような形で書いたあと、ぽんとtabキーを押すだけでHTMLが生成されます。
さらに、CSSも同じように生成が可能です。

Dreamweaverショートカット Emmet css

行一つ一つにtabを打っていくことで生成されます。

Dreamweaverショートカット Emmet css

ベンダープレフィックスも全部つきます。ありがたいのかそうでないのか。

Emmetはこちら。

チートシートはこちら。

複数カーソル処理と非連続選択の複数カーソル処理

「Alt+ドラッグ」でカーソルが増えます。これに同じ処理が可能です。
動画です。

「Ctrl+クリック」で離れたところも選択できます。
こちらも動画。

 

複製

行にカーソルを合わせて「Ctrl + D」で複製が可能。これはイラレでもおんなじですね。
動画ですよー。

 

指定する行への移動

「Ctrl + G」で行が指定できます。たくさん書いてあるとき便利ですね。

Dreamweaverショートカット 行の移動

 

コメントとコメントアウト

「Ctrl + /」でコメントアウトが出来ます。

テンキーがある人はテンキー箇所が便利。ない人は「め」のところ。「効かないなー」という場合は「Ctrl + shift + /」も試してみましょう。

 

検索する、置き換えする

「Ctrl + F」でファイル内の検索ができます。
ローカルにファイルが存在する場合、「Ctrl + shift + F」でファイルを横断した検索/置き換えが可能です。
(メニューの「検索」からでもできます)

Dreamweaverショートカット 検索と置き換え

 

少しずつ覚えながら使っていくと、コーディングがもっと早くなっていきます。頑張って覚えましょう!

 

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
インクループ株式会社

インクループ株式会社

インクループ株式会社は、データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現する会社です。WEBサイトをもっと活用したい、ECサイトの売上をもっと増やしたいなどのお悩みをお持ちの方はぜひお気軽にお問い合わせください。

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る