はじめに

デザインビューで確認しながらページ制作をおこなえるのが魅力のDreamweaverですが、マークアップに特化したソフトですので、HTMLエディタとしても大変便利な機能が盛りだくさんです。
デザインビューだけでなく、コードビューをうまく活用し、作業の効率化を図るためにこれだけは覚えておきたい機能や、ショートカットなどをご紹介させていただきます。
いままで、他のテキストエディタなどで作業されていた方も、一度Dreamweaverのコードビューで作業していただき、その優位性を認識していただけたら幸いです。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

• 体験版
• 購入

ソースコードを見やすく、操作のしやすい表示に整形する

ページを制作する際に、テンプレートなどを用いて制作をされることと思います。その際、記述・変更をする必要のない各ページ共通モジュール(ヘッダ、ナビゲーション、フッタなど)があると思います。 コードビューで操作をされる方にとって、これらのコードは目的の行(記述をおこなう行)へ移動する際の障害となります。

Dreamweaverでは選択したタグをたたんで表示する機能があります。この機能を用い、操作のしやすいソースコードに整形することが可能です。 そしてタグを選択する際にも、単純に選択するのではなく、ショートカットの「親タグを選択する」を用いると素早く目的のタグを選択することが可能です。

[ ソースコード整形に関するショートカット ]

機能	windows	mac
親タグを選択する	+	+
タグをたたむ	++	++
選択範囲をたたむ	++	++
たたんだ箇所の展開	++	++

■タグの整形

たたみたいタグの子タグにカーソルを合わせctrl+[（macの場合cmand+[ )で目的のタグまで選択します

たたみたいタグが選択されていることを確認し、ctrl+shift+J（macの場合comand+shift+J）でタグをたたみます。選択範囲をたたむ際はctrl+shift+C（macの場合comand+shift+C）でたためます。(上図ではhref属性の値をたたんでいます)
展開する際は、展開したい箇所にカーソルを合わせctrl+shift+E（macの場合comand+shift+E）でタグを展開します

ショートカットを用いたタグの挿入

Dreamweaverにはコードヒントという便利な機能があります。これはコードビュー独自の機能で、特定の文字を入力した際、入力しようとしてるタグの候補をメニュー表示てくれます。

■コードヒント

表示されたメニューは選択可能となり、タグの記述を省略できるとともに、記述ミスを防ぐことにもなります。
そして、Dreamweaverにはあらかじめ用意されたタグ記述のショートカットもあります。ショートカットを使用することにより、タグを記述することなく挿入することが可能です。特に見出しの挿入や画像の挿入は大変便利ですので活用されることをお勧めします。

また、ページ制作の際に原稿データからテキストをコピーし、ペーストして文章を流し込むことが多いと思います。その際、特定の文字列に対してタグの設定が必要な場面があると思います。
そのような時には折り返しタグの挿入を用いタグを設定すると大変便利です。
コードヒントやショートカット用い、記述にかかる時間の短縮と記述ミスを無くし効率化を図ることが可能です。

[ タグ記述のショートカット ]

機能	windows	mac
見出しの挿入	+～	+～
Boldの挿入	+	+
Itaricの挿入	+	+
画像の挿入	++	++
Tableの挿入	++	++
Anchorの挿入	++	++
改行の挿入	+	+
折り返しタグの挿入	+(対象の文字を選択して)	+(対象の文字を選択して)

■折り返しタグの挿入

タグを指定したいテキストを選択します。

タグを挿入したい文字列が選択されていることを確認し、ctrl+T（macの場合comand+T）で折り返しタグ挿入のウインドウを展開し、折り返しタグを挿入します。

その他覚えておきたいショートカットや機能

Dreamweaverにはその他にも便利なショートカットや機能が用意されています。
行の移動の際に、移動したい行番号がわかっている場合など、スクロールバーやカーソルで移動するのではなく、ショートカットで移動すると大変便利です。
ctrl+G（macの場合comand+,）で「行へ移動」ウインドウが展開するので移動したい行番号を指定します。
またインデントの挿入・削除もショートカットを用いれば複数行に対して適用させることも可能です。

[ その他覚えておきたいショートカット ]

機能	windows	mac
行を指定して移動	+	+
インデントの挿入	++	++
インデントの削除	++	++

また、PhotoshopやFireworksから画像をコピー&ペーストで挿入できたりと、他のAdobe製品との連携においても便利な機能があります。

挿入したい画像を選択しコピーします。

コードビューにペーストすると「イメージプレビュー」ウインドウが展開されますので、ファイル形式やファイル名を指定して保存します。

Dreamweaverを使用するメリット

作業者の方々は、限られた時間内で作業をすることが多いと思います。ミスのない確実な作業は最低限求められることですが、効率よく作業を行うことも作業者に求められる重要なスキルです。
Dreamweaverを使用するメリットは様々ですが、大まかにあげると以下の3点があげられます。

• 作業ルールの統一化
• 作業の効率化
• ファイル管理の一元化

また、フロントエンド(HTML、CSS、JavaScript)の作業だけでなく、バックエンドの作業においてもDreamweaverを使用すればさらに作業の効率化と正確さにおいて効果を発揮することができるのではないでしょうか。

著者について