CSS クラススタイルの適用、削除または名前変更

最終更新日 : 2019年5月6日

Dreamweaver で CSS クラススタイルを適用、削除、または名前を変更する方法について説明します

メモ

Dreamweaver 以降では、CSS スタイルパネルが CSS デザイナーに置き換えられています。 詳しくは、CSS デザイナーを参照してください。

クラススタイルは、テキストを制御するタグに関係なく、ドキュメント内の任意のテキストに適用できる唯一のCSSスタイルタイプです。現在のドキュメントに関連付けられているすべてのクラス スタイルは、 CSSスタイルパネル(名前の前にピリオド[.]が付いています)とテキストプロパティインスペクターのスタイルポップアップメニューに表示されます。

ほとんどのスタイルはすぐに更新されますが、スタイルが期待どおりに適用されたかを確認するには、 ブラウザーでページをプレビューする必要があります。 同じテキストに2つ以上のスタイルを適用すると、スタイルが 競合して予期しない結果が生じる場合があります。

メモ

外部CSSスタイルシートで定義されたスタイルをプレビューする場合は、必ず スタイルシートを保存して、ブラウザーでページをプレビューするときに変更が反映されるようにしてください。

CSS クラススタイルの適用

ドキュメントで、CSSスタイルを 適用するテキストを選択します。

段落全体にスタイルを適用するには、段落に挿入ポイントを配置します。

単一の段落内でテキストの範囲を選択した場合、CSSスタイルは選択した範囲のみに影響します。

CSSスタイルが適用される正確なタグを 指定するには、ドキュメントウィンドウの左下にあるタグセレクターで タグを選択します。

クラススタイルを適用するには、以下のいずれかの操作を行います。
  • CSSスタイルパネル(ウィンドウ > CSSスタイル)で、すべてモードを選択し、適用するスタイルの名前を 右クリックして、コンテキストメニューから「適用」を選択します。

  • HTMLプロパティインスペクターで、クラス ポップアップメニューから適用するクラス スタイルを選択します。

  • ドキュメントウィンドウで、選択したテキストを右クリック(Windows)または Controlキーを押しながらクリック(Macintosh)し、コンテキスト メニューでCSSスタイルを選択してから、適用するスタイルを選択します。

  • 書式 > CSSスタイルを選択し、 サブメニューで適用するスタイルを選択します。

選択範囲からのクラススタイルの削除

スタイルを削除する オブジェクトまたはテキストを選択します。
HTMLプロパティインスペクター(ウィンドウ > プロパティ)で、クラスポップアップメニューから「なし」を選択します。

クラススタイル名の変更

CSS スタイルパネルで、名前を変更するCSSクラススタイルを 右クリックし、「クラス名を変更」を選択します。
メモ

CSSスタイルパネルのオプションメニューから 「クラス名を変更」を選択してクラス名を変更することもできます。

クラス名を変更ダイアログボックスで、名前を変更するクラス がクラス名を変更ポップアップメニューで選択されていることを確認します。
「新しい名前」テキストボックスに新しいクラスの名前を入力し、「OK」をクリックします。

名前を変更するクラスが現在のドキュメントのheadの内部にある場合、Dreamweaverは クラス名と、現在のドキュメント内のクラス名のすべてのインスタンスを変更します。名前を変更するクラスが外部 CSSファイルにある場合、Dreamweaverはファイルを開いて クラス名を変更します。Dreamweaverはまた サイト全体の検索と置換ダイアログボックスを起動して、サイト内の古いクラス名のすべてのインスタンスを 検索できるようにします。