Dreamweaverのコーディングを楽にする方法

2014/06/02

書いた人：: yanoppa!
カテゴリ：: Dreamweaver Web制作
：: Dreamweaver コーディング初心者向け効率化拡張機能
111,997 views

Dreamweaverのコーディングを楽にする方法（スニペット・ショートカット・コードヒント・プラグイン・Emmet Zen-Codingなど）を紹介します！

Dreamweaverのコーディングを楽にする方法

こんばんちわ、まーくあっぷえんじにゃぁ4ヶ月弱のやのっぱです。

少しは出来るようになってきたのか、いかに楽をしてコーディングをするかを考える余裕が出来てきたので、そろそろ一度まとめてみようかと思います。

1.ショートカットキーを使う、カスタマイズする

よく使っているショートカットキーを並べてみました。
コピペや保存とかは割愛並べると増えたなぁ…と実感しますねｗ

Shift+Enter	<br>
Ctrl+Shift+P	<p></p>
Ctrl+B	<strong></strong>
Ctrl+G	行へ移動（chromeのデベロッパーツールなどをみて行数移動したいとき重宝）
Ctrl+F	検索・置換
Ctrl+Alt+I	画像挿入
Home	行の先頭へ
End	行の最後へ
Ctrl+Home	ページの先頭へ
Ctrl+End	ページの最後へ

色々いじってるので、標準はこのくらいかと思います

次は追加したものです、追加の仕方は編集→キーボードショートカットを開いて追加して行けます。

私はほとんどがEmmetになってましたｗ

Ctrl+Shift+Q	ソースフォーマットの適用
Ctrl+Q	閉じタグ挿入（閉じタグ挿入プラグイン）
Ctrl+Shift+A	Emmet機能(wrap with addreviation)：選択範囲を任意のタグで囲う
Ctrl+Shift+W	Emmet機能(toggle comment)：選択範囲をコメントにする
Ctrl+PageUp	Emmet機能(previous edit point)前のタグとタグの間へ移動
Ctrl+PageDown	Emmet機能(next edit point)次のタグとタグの間へ移動
Alt+下矢印	Emmet機能(select next item)次のプロパティ？へ移動
Alt+上矢印	Emmet機能(select previous item)前のプロパティ？へ移動
Ctrl+E	Emmet展開

よく使うものは左手だけで押せるようにしてます。

リストやdivを作るのもショートカットで出来ます。

2.コードヒントのカスタマイズ

Dreamweaverなどのコードヒントはとても助かるのですが、よくwidthと打とうとしてwindow打っちゃうことが多々。。。

windowとかつかわないし！！っということで、コードヒントでまず使わないであろうものを削ったり、並び替えたりしてあるコードヒントに変えてしまいます。

私はカラクリエイトさんのブログでダウンロードできるCodeHintsを使わせていただいてます。

打ち易さが劇的に変わりますので、おためしください。

使い方は、ダウンロードしたCodeHints.xmlをc:>Program Files>Adobe>Adobe Dreamweaver CC>configuration>CodeHintsの中にあるもともとのCodeHints.xmlに上書きするだけです。

心配な方は、もともとの方の拡張子を.bakなどに変更しておくと安全です。

他にも私は使っていませんがCSS3のコードヒント拡張やセレクターコードヒントの拡張などもあります。

3.スニペットを活用する

スニペットというのは、コピペ集のようなものです。

CSSでグラデーションつけるとか、これはまた打つの面倒くさいなぁ。。。と思うようなものを
どんどん登録して置いておける機能です。

使い方は、ウィンドウ>スニペットでスニペットウィンドウを開きます。
ウィンドウ右下の新規スニペットで作成し、適当な名前をつけて、種類を囲むのか挿入なのかを決めて
内容を決めて保存すると使えます。

初めはなんのこっちゃ？抹茶に紅茶ですが、使っていくと便利さに気がつくと思います。

まずは、無理矢理にでも使ってみてください。

4.閉じタグプラグインを使う

マークアップに欠かせないのが閉じタグコメントです。

これがあるのと無いのとで、作業のやりやすさがだいぶ変わってきます。

でも、いちいち打ち込むのも面倒。。。

ということで、拡張してワンタッチで挿入できるようになるプラグインをご紹介します。

End_comment.mxp

コメントを生成して挿入するDreamweaver用の拡張機能を作成しました：KATAC DESIGNER’S BLOG 渕上さん

こちらmxpファイルですので、ExtensionManager CS6は正常にインストールできますが、CCはzxpファイルに変換しないとつかえません。

変換の仕方はExtensionManager CS6を開き、ツールからMXP拡張機能をZXPに変換を選び、End_comment.mxpを置いてあるフォルダへ移動して、End_comment.mxpを選択すると、同じ場所に変換したものを作成してくれます。
変換したEnd_comment.zxpをダブルクリックするとExtensionManager CCが立ち上がり、インストールしてくれます。

5.画像サイズリセット・ハーフプラグインを使う

画像の差し替えや、Retina対応のためサイズを半分にするとき、一つ一つ変更してると面倒ですよね。
面倒くさいのはいやなので、これも一括で変更できる拡張機能を入れます。

とっても便利なので、おすすめします。

この、そう！それが欲しかった！という拡張機能作ってくださったのは、きんくまデザインさんです。

ほんと感謝ですｗ

きんくまデザインさん Dreamweaver 画像の幅と高さをリセットするコマンド

そして、Retina対応に欠かせない画像サイズを半分にするのもご紹介

バシャログさん Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利）

これまた、欲しかった機能です。
ページ内の画像サイズを縦横半分にしてくれます。

すばらしぃ

スマホサイトを作るときは重宝します。

6.Emmet/Zen-Codingを使う

今ではこれがないとコーディングしたくないですねｗ

エメットさんは俺の嫁

使い方を覚えるまではもたもたするかもですが、コーディングの効率が格段に上がります。まだお使いでない方はためしに使用してみるのもいいと思いますよ。

インストール方法

こちらEmmet公式サイトから使用エディターのダウンロードを選びます。

ダウンロードはこちら

GitHubに飛びますので、右にあるDownload ZIPでダウンロードしてください。
あとはEmmet.zxpをダブルクリックしてExtensionManagerでインストールするだけです。

基本的な使い方

省略されたコマンドを打って展開するとHTMLやCSSがぽぽぃっと吐き出されます。

展開キー	Ctrl+E
>	の中の
ˆ	一つ戻って
+	同列
*	掛ける
$	連番1～
$$	二桁の連番01～
()	グループ化
.	Class
#	id

これだけあれば大体つかえます。

例えば#Contentsを展開するとdivにidが付いた状態で展開されます。

<div id="Contents"></div>

divの中にpを入れたいときはこんなかんじです。

#Contents>p

<div id="Contents">
  <p></p>
</div>

htmlのテンプレートもでます。

 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

このテンプレは
!と打って展開するだけで出てきます。
楽ちんすぎる！！

他にも

ul>li*6と打って展開すると

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

と一発ででます。

もう少しいじって
ul>(li>a[href=#]{サンプル$$})*6を展開すると

<ul>
  <li><a href="#">サンプル01</a></li>
  <li><a href="#">サンプル02</a></li>
  <li><a href="#">サンプル03</a></li>
  <li><a href="#">サンプル04</a></li>
  <li><a href="#">サンプル05</a></li>
  <li><a href="#">サンプル06</a></li>
</ul>

と連番も可能です。

imgのsrcを連番にしておくと挿入が一瞬ですし、サイズ違ってても先にご紹介した画像リセットコマンド使えば問題なく使えます。

ul>(li>a>img[src=./images/dummy_img$$.jpg])*6を展開すると

<ul>
  <li><a href=""><img src="./images/dummy_img01.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img02.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img03.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img04.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img05.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img06.jpg" alt=""></a></li>
</ul>

途中からもできます。

ul>(li>a>img[src=./images/dummy_img$$@3.jpg])*6、$$の後ろに@3をつけました。

<ul>
  <li><a href=""><img src="./images/dummy_img03.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img04.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img05.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img06.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img07.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img08.jpg" alt=""></a></li>
</ul>

このように03から連番に出来ます。

私はタグをせこせこ打ちたくないので、全部これで作っちゃいます。
手間っぽいですが、今のところ余程レイアウトがあれこれしてなければ、この方法で作る方が早くなりました。

例えば

!>(hdr#header>.inner>h1.logo{ロゴ}+nav#Gnav>ul.navList.clearfix>(li>a[href=#]{ナビ$})*5)+(#Contents>art.contArt>h2.mainTi{タイトル}t+(sect.contSect$$>h3.sectTit{タイトル}+.sectMain.clearfix>.txtBlock>p.txt{テキスト}^fig.photo>a[href=#]>img)*2)+(ftr#Footer>.inner>small#CopyRight>img)と改行をしないで長々と打ちます。
慣れるとこのくらいなら4～5分かからないで打てます。

展開すると

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header id="header">
  <div class="inner">
    <h1 class="logo">ロゴ</h1>
    <nav id="Gnav">
      <ul class="navList clearfix">
        <li><a href="#">ナビ1</a></li>
        <li><a href="#">ナビ2</a></li>
        <li><a href="#">ナビ3</a></li>
        <li><a href="#">ナビ4</a></li>
        <li><a href="#">ナビ5</a></li>
      </ul>
    </nav>
  </div>
</header>
<div id="Contents">
  <article class="contArt">
    <h2 class="mainTi">タイトル</h2>
    <section class="contSect01">
      <h3 class="sectTit">タイトル</h3>
      <div class="sectMain clearfix">
        <div class="txtBlock">
          <p class="txt">テキスト</p>
        </div>
        <figure class="photo"><a href="#"><img src="" alt=""></a></figure>
      </div>
    </section>
    <section class="contSect02">
      <h3 class="sectTit">タイトル</h3>
      <div class="sectMain clearfix">
        <div class="txtBlock">
          <p class="txt">テキスト</p>
        </div>
        <figure class="photo"><a href="#"><img src="" alt=""></a></figure>
      </div>
    </section>
  </article>
</div>
<footer id="Footer">
  <div class="inner"><small id="CopyRight"><img src="" alt=""></small></div>
</footer>
</body>
</html>

が一瞬で吐き出されます。
あとはテキストや画像を入れて、CSSを書くだけ簡単！

それに閉じタグ忘れなどもなくなります。

構造がややこしくなればなるほど書くことも多くなりがちですが、マウス使わないでさくさく打つだけなので、私はこの方が好きみたいです。

詳しいコマンドはこちら

コーディングは早ければ早いほどよいし、楽にそうできたらいいですよね。

Dreamweaverのコーディングを楽にする方法

Dreamweaverのコーディングを楽にする方法

目次

1.ショートカットキーを使う、カスタマイズする

2.コードヒントのカスタマイズ

3.スニペットを活用する

4.閉じタグプラグインを使う

5.画像サイズリセット・ハーフプラグインを使う

6.Emmet/Zen-Codingを使う

基本的な使い方

この記事を読んだ人はこんな記事も読んでいます