2009年08月10日

超便利なDreamweaverのコードナビゲータ:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

超便利な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の新機能はあまり派手さはないのですが、地味に、しかし確実に効率があがるようなものが多いですね。

アップデートする価値アリアリではないでしょうか。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 15:18
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック