ワンパクの「もっと使いこなしてみよう！Dreamweaver」

第1回まずはマイワークスペースの整備、そして作業開始！

今月号の記事

この連載では、株式会社ワンパクの近藤＆杉山の師弟コンビが、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けします（一部、株式会社ワンパクでの実話に基づいています）。少しでもみなさんの作業効率アップのお手伝いができればうれしいです。また、「杉山のこれ知ってます？」コーナーでは、杉山のお気に入りの機能を紹介します。

第1回目は、まずはワークスペースが自分にとって快適な環境になるように整えましょう。そして制作作業を進めていく上で役立つ、「関連ファイルツールバー」と「コードナビゲータ」を覚えましょう。

なにはともあれ作業環境の整備から

近藤：はじめまして。本連載を担当させていただきます株式会社ワンパクのテクニカルディレクターの近藤です。

杉山：はじめまして。師匠近藤のお手伝いをしながら Dreamweaver マスターをめざす株式会社ワンパクのデザイナーの杉山です。師匠、では、まず何から始めましょうか？

近藤：そうだな、まずは作業環境の整備から始めるぞ！Dreamweaver にはデフォルトで数種類のワークスペースのレイアウトが用意されているからそこから選んでもよいのだが、そのまま使用するだけでなく、自分好みにカスタマイズも可能なのだ。

杉山：レイアウトと言えば、上下にしか配置できなかったコードビューとデザインビューですが、CS4 から配置パターンが増えたんですよね(^^)

近藤：うむ。メニューの [表示]-[左右に分割] からコードビューを左に、デザインビューを右に配置でき、その後 [表示]-[デザインビューを左に表示] から、ビューの左右を入れ替えられるぞ。

コードビューとデザインビューは上下だけでなく左右の配置も可能

杉山：自分の使いやすいようにコードビュー・デザインビューの配置ができるのはうれしいですね(^^)
でも、私はデザインビューはあまり使わないのですが……。
あっ！　「分割コード」なるものを発見しましたよ！

近藤：メニューの[表示]-[分割コード]を選択すると、上下にコードビューを配置でき、その後[表示]-[左右に分割]から左右にコードビューを表示することも可能だぞ。

杉山：コードビューの分割ができるのは、かなりうれしいですね！　メニューからだけじゃなく、アプリケーションバーのレイアウトアイコンからも変更できちゃうんですね。便利～(^^)

コードビューを上下・左右に配置可能

お気に入りのレイアウトは保存すべし！「新規ワークスペース」

杉山：このパネルは右のモニタの右側に表示して、このパネルは左のモニタめいっぱいのサイズで表示して……このパネルはフロート表示にしておこう……。

近藤：毎回レイアウトの設定をしているのか？

杉山：はい、案件によってなど、適宜使い勝手のよいレイアウトにカスタマイズすることが大事なんですよね！

近藤：確かにそうだが、毎回となると時間の無駄だな。設定したレイアウトは保存して、いつでも切り替え可能にしておくのだ！

杉山：……保存しておけば、毎回手間をかけずにすんだの(>_<)

近藤：メニューの [ウィンドウ]-[ワークスペースのレイアウト]-[新規ワークスペース] から、もしくはアプリケーションバーのワークスペースのレイアウト名から「新規ワークスペース」を選択し、任意の名前でカスタマイズしたワークスペースを保存することができるのだ。

カスタマイズしたレイアウトの保存が可能

杉山：本当だ！　自分が保存したレイアウトが追加されました(^^)

近藤：保存したレイアウトの管理は、メニューの[ウィンドウ]-[ワークスペースのレイアウト]-[ワークスペースの管理]から「名前の変更」や「削除」が可能だぞ。

保存したレイアウトは[ワークスペースの管理]から管理可能

複数ファイルを開くなんてナンセンス「関連ファイルツールバー」

近藤：それでは作業環境が整ったところで、さっそく作業を始めてもらおう。

杉山：はい。この HTML を開いて……CSS の調整が必要だから CSS も開いてっと。

近藤：ちょっと待て！せっかく Dreamweaver を使うんならいくつものファイルを開いて編集なんてことはせずに「関連ファイルツールバー」を活用するのだ！

杉山：「関連ファイルツールバー」(?_?)

近藤：デザインビュー、もしくはコードビューの上部を見てみるのだ。

杉山：なにかファイル名が表示されています。

ドキュメント上部の「ソースコード」横にファイル名が表示される
赤枠部分にファイル名が表示される

近藤：それが「関連ファイルツールバー」だ。ここには現在のファイルに関連する各種ファイルが表示されている。そして編集したいファイルをクリックすると、すぐにそのファイルにアクセス可能だ。

杉山：これは便利！　よくどのファイルを編集しなきゃいけないのかコードビューを調べたり、どのフォルダに格納されているか探したりしてたのですが、これなら手間いらず！そうだ！　さっき教えてもらった分割コードと併用すれば、HTML を表示しつつ関連ファイルから CSS を開いて修正なんてこともできるんですね！　HTML 構造確認しながら作業できるから便利だな～(^^)

編集したい場所にすぐにアクセス「コードナビゲータ」

杉山：そういえば、更新や修正の際に HTML の構造、CSS、JavaScript などの定義書がなくて、どの部分を修正すればいいかわからないことがあるんですよね。
「関連ファイルツールバー」は編集するファイルがすぐに開けて便利ですが、編集する箇所を探すのが大変です(><)

近藤：なるほど。自分以外が制作したファイルを編集する場合などにありがちな話だ。そんな時は「コードナビゲータ」を有効活用だ！　ページ内の任意の場所でデザインビューやコードビューにマウスオーバしてみるのだ！

杉山：なにか舵のようなアイコンがでましたよ。

コードナビゲータインジケータ

近藤：「コードナビゲータインジケータ」が表示されたのだ。クリックしてみよう。

杉山：あ、セレクタの一覧が表示されました。

セレクタの一覧

近藤：そこで修正や確認をしたいセレクタをクリックすれば対象箇所のCSSのコードにすぐにアクセスできるぞ。

杉山：これなら修正や更新のときなど作業が早くなりますね(^^)

近藤：「コードナビゲータ」はCSSファイルはもちろん、JavaScript、テンプレートファイルやライブラリ、インクルードファイルにも、瞬時に対象箇所にアクセス可能だ。
ちなみに「コードナビゲータインジケータ」の表示は、マウスオーバして待たなくても、Windows なら「Alt」キーを押しながらクリック、Macintosh なら「Command + Option」キーを押しながらクリックでもコードナビゲータを表示できるぞ。