第20回
超便利なDreamweaverのコードナビゲータテーブルレイアウトを卒業しよう
超便利なDreamweaverのコードナビゲータ
今回はDreamweaver CS4の超便利機能コードナビゲータをご紹介します。使用時・非使用時でCSSの記述効率に激しく差がでることは間違いなし。
コードナビゲータとは
- Dreamweaverの使い方入門
-
Dreamweaver CS5の使い方からWebサイトの構築まで、3日間で学べる基礎講座です。
- Dreamweaver CS5 入門講座
コードナビゲータとは、Dreamweaver CS4から搭載された新機能で、HTMLと関連する外部ファイル（CSSやJavaScript）の編集したい箇所を一撃で開くことができます。以上おわり…ですが、これがとてつもなく便利です。
「あれ…ここのスタイルを指定してるのはどこ…？」
というような問題が起きたときにもコードナビゲータを使えば一瞬で探し出すことができます。これさえあれば自分でコーディングしたページは勿論、誰かが書いたごちゃごちゃコードも怖くない…かも。
コードナビゲータの使い方
Altキー + クリック！以上！
CSSルールが適用されている部分をAltキーを押しながらクリックするとポップアップのウィンドウが開きます。
すると、そこに適用されているスタイルのセレクタがズラリと出てくるので、編集したいスタイルをクリックします。マウスオーバーすると実際のプロパティと値も見ることができるので、大量にカスケーディングしていても楽に探せます。
クリックすると該当する箇所を一瞬でコードビューで開くことができます。
先ほども少し書きましたが、他の人が書いたCSSや、Spryで生成されたCSSを編集するときに最高に便利な気がします。自分で書いていればある程度 HTMLとCSSの関係性が頭に入っていますが、人が作ったページのHTMLとCSSを紐付けていくのは結構メンドクサイですよね。
また、Altキーを押さなくても、入力カーソルを置いて2秒間マウスを動かさずにいるとインジケータというアイコンが表示されるので、これをクリックしてもOKです。が、もちろんAltキーのほうが素早く操作できます。
このインジケータはマウスを2秒止めると常に出てくるので、邪魔な場合は、コードナビゲータを開いて「インジケータを無効にする」のチェックを入れれば出ないようになります。
Flash CS4などに比べるとDreamweaver CS4の新機能はあまり派手さはないのですが、地味に、しかし確実に効率があがるようなものが多いですね。
アップデートする価値アリアリではないでしょうか。では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ