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

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

注意:

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

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

ほとんどのスタイルはすぐに更新されますが、ページをブラウザーでプレビュー表示して、スタイルが望みどおりに適用されたかどうかを確認してください。同じテキストに複数のスタイルを適用すると、スタイルが競合して予想外の結果が生じることがあります。

注意:

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

CSS クラススタイルの適用

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

    挿入ポイントを段落内に置くと、段落全体にスタイルが適用されます。

    1 つの段落内で特定範囲のテキストを選択した場合は、CSS スタイルは選択範囲だけに適用されます。

    特定のタグだけに CSS スタイルを適用するには、ドキュメントウィンドウの左下にあるタグセレクターでタグを選択します。

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

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

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

    • フォーマット/CSS スタイルを選択し、適用するスタイルをサブメニューから選択します。

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

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

クラススタイル名の変更

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

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

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

    名前を変更するクラスが現在のドキュメントの head の内部に記述されている場合、Dreamweaver はクラス名を変更するだけでなく、現在のドキュメントで使用されているそのクラスのすべてのインスタンスについてもクラス名を変更します。名前を変更するクラスが外部の CSS ファイルに記述されている場合、Dreamweaver はそのファイルを開き、クラス名を変更します。Dreamweaver によって、検索および置換ダイアログボックスも表示されます。これにより、古いクラス名のすべてのインスタンスをサイト内で検索できます。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト