第20回
超便利なDreamweaverのコードナビゲータテーブルレイアウトを卒業しよう

超便利なDreamweaverのコードナビゲータ

今回はDreamweaver CS4の超便利機能コードナビゲータをご紹介します。使用時・非使用時でCSSの記述効率に激しく差がでることは間違いなし。

コードナビゲータとは

コードナビゲータとは、Dreamweaver CS4から搭載された新機能で、HTMLと関連する外部ファイル(CSSやJavaScript)の編集したい箇所を一撃で開くことができます。以上おわり…ですが、これがとてつもなく便利です。

「あれ…ここのスタイルを指定してるのはどこ…?」

というような問題が起きたときにもコードナビゲータを使えば一瞬で探し出すことができます。これさえあれば自分でコーディングしたページは勿論、誰かが書いたごちゃごちゃコードも怖くない…かも。

コードナビゲータの使い方

Altキー + クリック!以上!

CSSルールが適用されている部分をAltキーを押しながらクリックするとポップアップのウィンドウが開きます。

CSSルールが適用されている部分をAltキーを押しながらクリックする

すると、そこに適用されているスタイルのセレクタがズラリと出てくるので、編集したいスタイルをクリックします。マウスオーバーすると実際のプロパティと値も見ることができるので、大量にカスケーディングしていても楽に探せます。

クリックすると該当する箇所を一瞬でコードビューで開くことができます。

セレクタをクリックするとコードビューに移動する

先ほども少し書きましたが、他の人が書いたCSSや、Spryで生成されたCSSを編集するときに最高に便利な気がします。自分で書いていればある程度 HTMLとCSSの関係性が頭に入っていますが、人が作ったページのHTMLとCSSを紐付けていくのは結構メンドクサイですよね。

また、Altキーを押さなくても、入力カーソルを置いて2秒間マウスを動かさずにいるとインジケータというアイコンが表示されるので、これをクリックしてもOKです。が、もちろんAltキーのほうが素早く操作できます。

インジケータのアイコン

このインジケータはマウスを2秒止めると常に出てくるので、邪魔な場合は、コードナビゲータを開いて「インジケータを無効にする」のチェックを入れれば出ないようになります。

インジケータを無効にするチェックボックス

Flash CS4などに比べるとDreamweaver CS4の新機能はあまり派手さはないのですが、地味に、しかし確実に効率があがるようなものが多いですね。

アップデートする価値アリアリではないでしょうか。では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSSコーディングでハマったら…
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読