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」に各リストを割り当てました。
これで、ほとんどのタグづけがショートカットキーで行えるようになります。慣れてしまえば、これより速いコーディング手法はそうそうないのではないでしょうか。
