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

【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」に各リストを割り当てました。

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

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ