DreamweaverでCSSのIDとclassを簡単に探す方法
- acky.infoホーム
- デザインのヒント
- Webデザイン
- DreamweaverでCSSのIDとclassを簡単に探す方法
DreamweaverでCSSのIDとclassを簡単に探す方法の概要です
Dreamweaverでホームページをつくっているときに、変更したいIDやclassの書かれている場所を探のは手間がかかります。
そこで、変更したいIDやclassの書かれている場所を簡単に探す方法をご紹介します。
CSSパネルから探す
DreamweaverのCSSパネルに表示されたプロパティをダブルクリックするとCSSへ移動する機能を使って、目的のCSSへ移動することができます。
Dreamweaverの設定
-
環境設定を開く
Dreamweaverの『編集＞環境設定』を選びます。 -
設定を変更する
CSSスタイルシートの『CSSパネルダブルクリック時』を『CSSダイアログを利用して編集』から『コードビューを指定して編集』へ変更します。
目的のCSSの見つけ方
-
変更したい箇所を探す
コードビューのHTML要素の上にカーソルを置くと、CSSパネルには適用されているCSSが表示されます。
目的のCSSを見つけやすくするためにCSSパネルの現在を押して絞り込み、変更したいプロパティをダブルクリックします。 -
修正する
目的のCSSファイルへ移動するので修正や変更をしましょう。
Dreamweaver CCからはもっと簡単に探せます
Dreamweaver CCからはCSSパネルが進化してCSSデザイナーパネルになりました。
変更したいCSSプロパティの上で右クリックから『コードへ移動』を選ぶと目的のCSSへ移動します。詳しくはAdobe
TV『CSSデザイナーによる直感的なCSSプロパティの編集』の3分50秒あたりからご覧ください。
コードナビゲータを使ってコードビュー・デザインビューから探す
目的のCSSへはコードビューまたは、デザインビューからも移動できます。
-
コードナビゲータの表示を待つ
コードビューのHTML要素の上や、デザインビューの要素の上にマウスを移動して少し待つと、コードナビゲータの舵のアイコンが出てきます。
舵のアイコンをクリックすると要素に適用されているCSSのIDとclassの一覧がポップアップで表示されます。
（Altを押しながらクリックすると、舵のアイコンを待たずにポップアップが表示されます。）
ポップアップしたウインドウの中に書かれているIDやclassの上にカーソルを移動すると内容がプレビューされるので、変更したいIDやclassを探してクリックします。
目的のCSSファイルへ移動するので修正や変更をしましょう。 -
変更するCSSを探す
舵のアイコンをクリックすると要素に適用されているCSSのIDとclassの一覧がポップアップで表示されます。
（Altを押しながらクリックすると、舵のアイコンを待たずにポップアップが表示されます。）ポップアップしたウインドウの中に書かれているIDやclassの上にカーソルを移動すると内容がプレビューされるので、変更したいIDやclassを探してクリックします。
目的のCSSファイルへ移動するので修正や変更をしましょう。 -
修正する
目的のCSSファイルへ移動するので修正や変更をしましょう。
ブラウザの開発者向けツールから探す
CSSがインクルードされていたり、メディアクエリなどでDreamweaverの機能だけでは探せないときは、ブラウザの『開発者向けツール』を使って探します。
-
開発者ツールを起動する
ブラウザ（Internet Explorer・Firefox・Chrome）を開いてF12を押すと開発者ツールが起動します。
要素を選択できるツールを選び目的の要素の上にポインターを移動すると、適用されているCSSと行数が開発者向けツールに表示されます。 -
調べた行まで移動する
コードビューでCtrl+Gを押すと指定の行数まで移動するウインドウが開きます。
目的の行数まで移動して修正や変更をしましょう。