【Dreamweaver】デザインビューを使って最速コーディング

Dreamweaver のデザインビューを使って素早く HTML のコーディングをする方法です。

まずは、原稿をプレーンなテキストデータに落として、秀丸等のテキストエディタを使って整形します。
ブロック毎に改行を二つ入れていきます。文中の改行箇所は改行を一つ入れます。
こんな感じです

タイトルタイトルタイトル

サブタイトルサブタイトル

本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文

見出し見出し

本文本文本文本文本文本文

見出し見出し

順不同リスト

順不同リスト

本文本文本文本文

見出し見出し

番号順リスト

番号順リスト

見出し見出し

定義リストタイトル

定義リスト内容定義リスト内容

定義リストタイトル

定義リスト内容定義リスト内容

Dreamweaver を立ち上げて、新規作成ファイルの中に段落（p）を一つだけ入れます。

そして先ほどのプレーンなテキストをデザインビューにペースト。

ブロック毎に <p> が自動で入って、文中の改行には <br /> が入ります。
これでかなり効率アップです。

次に、見出しに変更したい段落にカーソルを置いてキーボードショートカットで見出しレベルを指定していきます。

ブロック要素の場合は文字列を選択する必要はありません。面倒ですしミスの元です。変更したい段落内にカーソルを置くだけでオッケーです。

段落を見出しに変えるショートカットは至極簡単。

• h1 → Ctrl＋1
• h2 → Ctrl＋2
• h3 → Ctrl＋3
• h4 → Ctrl＋4
• h5 → Ctrl＋5
• h6 → Ctrl＋6

直観的すぎることこのうえないです。

インライン要素のタグ付の場合は、文字列を選択してからショートカットキーでタグづけをします。
文字列を選択する時は「Shift＋Ctrl＋左右」で単語選択ができるので、これもショートカットキーを使うと速いです。

• strong → Ctrl＋B
• em → Ctrl＋I

以上のように、デザインビュー上でショートカットキーを活用すると、面倒なタグづけの効率が驚くほど向上します。

ただし、Dreamweaver をデフォルトの設定のまま使っている場合はリスト関係のショートカットキーが設定されていません。
リストはどんなサイトでもよく使うので、これは不便です。

というわけで、ショートカットキーをカスタマイズしてしまいましょう。

編集メニュー → キーボードショートカットを選択

メニューコマンド内の「テキスト」→「リスト」の中にある各リストにショートカットキーを設定。上の例では空いてる「Ctrl＋7 ～ Ctrl＋9」に各リストを割り当てました。

これで、ほとんどのタグづけがショートカットキーで行えるようになります。慣れてしまえば、これより速いコーディング手法はそうそうないのではないでしょうか。