DreamweaverでCSSのIDとclassを簡単に探す方法

  1. acky.infoホーム
  2. デザインのヒント
  3. Webデザイン
  4. DreamweaverでCSSのIDとclassを簡単に探す方法

DreamweaverでCSSのIDとclassを簡単に探す方法の概要です

Dreamweaverでホームページをつくっているときに、変更したいIDやclassの書かれている場所を探のは手間がかかります。
そこで、変更したいIDやclassの書かれている場所を簡単に探す方法をご紹介します。

広告

CSSパネルから探す

DreamweaverのCSSパネルに表示されたプロパティをダブルクリックするとCSSへ移動する機能を使って、目的のCSSへ移動することができます。

Dreamweaverの設定

手順1:環境設定を開く
Dreamweaverの『編集>環境設定』を選びます。

手順2:設定を変更する
CSSスタイルシートの『CSSパネルダブルクリック時』を『CSSダイアログを利用して編集』から『コードビューを指定して編集』へ変更します。

目的のCSSの見つけ方

手順1:変更したい箇所を探す
コードビューのHTML要素の上にカーソルを置くと、CSSパネルには適用されているCSSが表示されます。
目的のCSSを見つけやすくするためにCSSパネルの現在を押して絞り込み、変更したいプロパティをダブルクリックします。

手順2:修正する
目的のCSSファイルへ移動するので修正や変更をしましょう。

Dreamweaver CCからはもっと簡単に探せます

Dreamweaver CCからはCSSパネルが進化してCSSデザイナーパネルになりました。
変更したいCSSプロパティの上で右クリックから『コードへ移動』を選ぶと目的のCSSへ移動します。詳しくはAdobe TV『CSSデザイナーによる直感的なCSSプロパティの編集』の3分50秒あたりからご覧ください。

コードナビゲータを使ってコードビュー・デザインビューから探す

目的のCSSへはコードビューまたは、デザインビューからも移動できます。

手順1:コードナビゲータの表示を待つ
コードビューのHTML要素の上や、デザインビューの要素の上にマウスを移動して少し待つと、コードナビゲータの舵のアイコンが出てきます。
舵のアイコンをクリックすると要素に適用されているCSSのIDとclassの一覧がポップアップで表示されます。
Altを押しながらクリックすると、舵のアイコンを待たずにポップアップが表示されます。)
ポップアップしたウインドウの中に書かれているIDやclassの上にカーソルを移動すると内容がプレビューされるので、変更したいIDやclassを探してクリックします。
目的のCSSファイルへ移動するので修正や変更をしましょう。

手順2:変更するCSSを探す
舵のアイコンをクリックすると要素に適用されているCSSのIDとclassの一覧がポップアップで表示されます。
Altを押しながらクリックすると、舵のアイコンを待たずにポップアップが表示されます。)

ポップアップしたウインドウの中に書かれているIDやclassの上にカーソルを移動すると内容がプレビューされるので、変更したいIDやclassを探してクリックします。
目的のCSSファイルへ移動するので修正や変更をしましょう。

手順3:修正する
目的のCSSファイルへ移動するので修正や変更をしましょう。

ブラウザの開発者向けツールから探す

CSSがインクルードされていたり、メディアクエリなどでDreamweaverの機能だけでは探せないときは、ブラウザの『開発者向けツール』を使って探します。

手順1:開発者ツールを起動する
ブラウザ(Internet Explorer・Firefox・Chrome)を開いてF12を押すと開発者ツールが起動します。
要素を選択できるツールを選び目的の要素の上にポインターを移動すると、適用されているCSSと行数が開発者向けツールに表示されます。

手順2:調べた行まで移動する
コードビューでCtrl+Gを押すと指定の行数まで移動するウインドウが開きます。
目的の行数まで移動して修正や変更をしましょう。

まとめ

DreamweaverだけでCSSを見つけることができると、アプリの切り替えがないので手間が減ります。
しかし、Dreamweaverの機能だけ見つけられないときは、ブラウザの『開発者向けツール』を使ってCSSのIDやclassを見つけましょう。

最後まで読んでいただき、ありがとうございました。

広告
最新のEdge、Internet Explorer、Firefox、Chromeできれいにページを見ることができます。