2008年11月にリリースされたWebオーサリングソフト「Dreamweaver」の新バージョン、「Adobe Dreamweaver CS4」。Dreamweaverを完全マスターするためにも、CS4から加わった新機能「コードナビゲータ」や「ビューの切り替え」、「Photoshopとの連携」、「Spryデータセット」、「ライブビュー/ライブコード」の具体的な操作方法を前編、後編の2回にわけて紹介しよう。

「コードナビゲータ」で定義したCSSをすばやく調べる

「コードナビゲータ」は、選択した場所に適用されているCSSの内容を確認する機能。ショートカットキーでコードナビゲータを開くには、「Alt」キー(Win)または「Command」＋「Option」キー(Mac)を押しながら、ドキュメントの任意の場所をクリックすると、グレーの太枠に囲まれたウィンドウが開く。これがコードナビゲータである。

コードナビゲータにはセレクタ一覧が表示され、セレクタ名の上にマウスカーソルを重ねると、定義したCSSプロパティとその値が表示される。

「Alt」キー(Windows)または「Command」＋「Option」キーを押しながらクリックすると、コードナビゲータが表示される

セレクタ名にカーソルを重ねると、定義したCSSプロパティと値が表示される

この中から、編集したいセレクタをクリックすると、CSSを記述したファイルが開く。該当するコードの前には、カーソルが点滅する。

該当するコードの前でカーソルが点滅する

コードナビゲータを開く方法を、もうひとつ紹介したい。「インジケータ」と呼ばれる船舵の形をしたアイコンを使って、コードナビゲータを開く方法である。ドキュメントの任意の場所をクリックし、数秒待つとクリックした場所にインジケータが表示されるので、これをクリック。すると、コードナビゲータが表示される。

任意の場所をクリックして数秒経つと、インジケータが表示される

インジケータを使わないのであれば、いったんコードナビゲータを表示し、「インジケータを無効にする」にチェックを付けると、以後はインジケータが表示されなくなる。

インジケータをクリックするとコードナビゲータが表示される

インジケータを非表示にするには、「インジケータを無効にする」にチェックを付ける

ビューの表示方法を切り替える

インタフェース関連の注目機能であるドキュメントウィンドウの分割方法について、簡単に紹介したい。初期設定では、上にコードビュー、下にデザインビューの分割表示だが、この上下を入れ替えたいときは「表示」メニュー→「デザインビューを上に表示」を選択する。

上にコードビュー、下にデザインビューが表示された状態

上下が入れ替わる

また、左右に分割することも可能で、「表示」メニュー→「左右に分割」を選択すると、ビューが左右に分割される。

左右に分割した状態

「表示」メニュー→「分割コード」を選択すると、分割したビューの両方をコード表示にできます。

「表示」メニュー→「分割コード」を選択

両方ともコードビューになった

分割コードの状態で、HTMLファイルに関連するCSSファイルやJavaScriptファイルを表示するには、関連ファイルツールバーに表示されている関連ファイル名をクリック。

関連ファイルをクリックすると、そのコードが表示される

インタフェースに関しては、パネルをアイコン化して作業スペースを広くとれるようになったのも、今バージョンの特徴。パネルエリア右上角にある「アイコンに縮小」ボタンをクリックすると、パネルがアイコン表示に変わる。

展開表示で「アイコンに縮小」ボタンをクリック

アイコン表示になり、作業スペースが広くなった