HTML制作が3倍速くなるDreamweaverの裏技教えます

第1回：デザインビューは使えない？

鷹野雅弘（@swwwitch）　スイッチ
2012/6/29

CSS Niteでおなじみの鷹野さんが、新人Web担当者向けに知って得するDreamweaver裏技を教えます

　CSS Niteを主催している鷹野です。この連載では、知ってると、HTMLページの制作速度が3倍に上がるAdobe Dreamweaver（以下、Dreamweaver）の裏技をお伝えしていきます。新人Web担当者のキャシーに、僕がいろいろと教えていくスタイルで進めていきます。

今日、取り上げる機能 Wordからのコピー＆ペースト クイックタグ編集 ライブビュー

---

鷹野／Web制作会社に勤務。Dreamweaverとはバージョン1.2からのお付き合い。『よくわかるDreamweaverの教科書（CS6対応版）』をマイナビから発売。 。

キャシー／企業のWeb担当者。ちょっとした更新作業を行っている。CMSが入っていないので、自分でコーディングしている。使用しているバージョンはDreamweaver CS4。

---

WordとDreamweaverは連携できる

キャシー：会社でDreamweaverを使っているんですけど、全然使いこなせていない気がするんですよね。というか、Dreamweaverを使う意味がよく分からないかも……。テキストエディタでイイじゃん、みたいな……。

鷹野：同じように考えている人は多いかもしれませんね。ということはキャシーさんは、コードビューで作業しているんですか？

キャシー：はい、そうですね。デザインビューだと崩れてしまうので……。もっぱらコードビューです。

鷹野：確かにデザインビューだと、レイアウトがおかしくなってしまうことがありますね。そもそも、いろいろな種類やバージョンなど多種多様なブラウザを、デザインビューひとつで引き受けるのはムリといえばムリなんですけど……。実際、デザインビューはここ数バージョン手が入っていないんですよね。

キャシー：でしょ、でしょ！

鷹野：じゃ、今日は、デザインビューを使うメリットをいくつかご紹介しますね。キャシーさんはMicrosoft Word（以下、Word）は使いますか？

キャシー：はい。社内はもちろん、原稿をWordでやりとりすることが多いですね。

鷹野：例えば、この書類。Wordで見ると、標準の他、見出しには「見出し1」や「見出し2」が使われています。

見出し1

見出し2

標準

キャシー：はい。あと、箇条書きも使われていますね。

箇条書き

鷹野：これをコピーして、Dreamweaverのデザインビューにペーストしてみてください。

キャシー：えっと……。

鷹野：コードビューで確認すると、標準はp要素、見出し1はh1要素、見出し2はh2要素、箇条書きはul/li要素のようにマークアップされますよね。

キャシー：ホントだ！

見出しや段落

箇条書き部分

鷹野：Wordできちんとスタイル指定しておけば、Dreamweaverでのマークアップ作業を軽減できるんですよ。

キャシー：それはスゴイですね。でも、Wordでスタイル指定してる人って少ないですよ〜（笑）。

鷹野：それも事実ですね……（苦笑）。とりあえず、原稿としてやりとりするものには、「最低限、ここだけはやってね」と指示書を付けてみるといいかも。

キャシー：そうですね、やってみます。

クイックタグ編集

鷹野：次にデザインビューを使うメリットとして「クイックタグ編集」を紹介しますね。デザインビューでCtrl＋Tキーを押してみてください。

キャシー：小さなウィンドウが出てきました。

鷹野：続けてCtrl+Tキーを押していくと、「タグの編集」「折り返しタグ」「HTMLの編集」と切り替わります。

キャシー：はい。

鷹野：例えば、訂正箇所を示すためにdel要素でマークアップしますよね。この場合、コードビューだと該当箇所を<del>...</del>で囲みます。閉じタグは「</」まで入力すれば補完されますけど、ちょっと面倒です。デザインビューでテキストを選択してCtrl+Tキーを押し、「折り返しタグ」が表示されたら「de」を入力、Enterキーを2回押します。これだけの作業で選択していたテキストが<del>...</del>で囲まれます。

deと入力すると（HTMLファイルを表示する）

 

 

<del>を定義

 

 

delがプルダウンメニューに出てくる

 

 

 

キャシー：なるほど〜、慣れれば便利そうですね！

鷹野：でしょ、でしょう。del要素をマークアップしたら、続けてins要素を挿入しましょう。「<del>23日</del><ins>24日</ins>」をクイックタグ編集を使って行ってみましょう。

• 右矢印キーを1回押す
  

 

 

 

 

 

 

• Ctrl+Tキーを押す
• 「ins」を入力し、Enterキーを2回押す
• 挿入したい文字を入力する
  
  

HTMLファイルを表示する

キャシー：訂正はよく使うので、今度やってみますね。

鷹野：繰り返し練習して、ものにしてみてください。慣れると、文章を書きながらタグ設定できるのでオススメです。

キャシー：他にどんな使い方がありますか？

鷹野：例えばフリガナを設定する場合に「<span class="furigana">（たかの・まさひろ）</span>」のようにマークアップしますよね。クイックタグ編集を使えば、次のように操作できるんですよ。

• タグ付けしたいテキストを選択する
• Ctrl+Tキーを押す
• 「sp」を入力し、Enterキーを押す（<span>が挿入される）
  
  
  

  HTMLファイルを表示する

  
  
• スペースを挿入する
• 下向き矢印キーを1回押して「class」を選択してEnterキーを1回押す（<span class="">が挿入される）
  
  
  
  
• 「furigana」と入力して、Enterキーを押す
  
  
  
  （リンク設定しているCSSに「furigana」クラスが用意されていれば、リストから選択できます）
  
  
  
  
  
  

  HTMLファイルを表示する

キャシー：なるほどね。ちょっと、これは難易度高いかも。でもなんか強力そう。最近のDreamweaverでしか使えない機能なの？

鷹野：1999年にリリースされたDreamweaver 3から実装された古株の機能です。

ライブビュー

キャシー：ところで［ライブビュー］とか［ライブコード］とか、いろんなボタンが増えていますけど、これはどんな機能なんですか？ （注：Dreamweaver CS6では、ボタンは［ライブ］に集約されている）

鷹野：［ライブビュー］ボタンをクリックすると、デザインビューがライブビュー表示というモードに変わる。SafariやGoogle Chromeで採用されているWebKitでレンダリングされて、次のことが可能になります。

• CSSのレンダリングがWebKit相当になる
  
• JavaScriptが実行されるのでマウスオーバーなどを確認できる
  
• Ctrl＋クリックすれば、リンク先のページにリンクできる

キャシー：分かったような、分からないような……。

鷹野：つまり、Dreamweaverのデザインビューを、ブラウザとして使うことができる、ということ。ブラウザープレビューを使わずにDreamweaver内である程度完結できる。

キャシー：あ、ホントだ。デザインビューだとくずれていたけど、ライブビューだと、ちゃんと表示される。すごいですね。

鷹野：ライブビュー上ではテキストの修正などは行えないけど、分割ビューにして、コードビューでなら編集できる。

キャシー：そうなんだ〜。これは、どのバージョンからですか? ?

鷹野：Dreamweaver CS4からだから、キャシーの使っているバージョンでも使えるよ。Dreamweaver CS4／CS5／CS5.1、それぞれ最新版ほど、WebKitのバージョンが上がってる。

キャシー：やっぱり、Dreamweaverの機能、全然使っていなかったな〜。

鷹野：そうそう、ライブビューの切り替えはAlt+F11キーでオン／オフできるから、これも覚えておくといいです。

キャシー：また、いろいろ教えてくださいね。

鷹野：もちろん。

イラスト：ロゴ・アンド・ウェブ

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）