[CSS スタイル] パネルの使用

[CSS スタイル] パネルを使用すれば、CSS スタイルを表示、編集、削除できる他、外部スタイルシートをドキュメントに添付することもできます (このパネルの概要については、[CSS スタイル] パネルについてを参照してください)。

[CSS スタイル] パネルを開くには :

• 以下のいずれかの操作を行います。
  • [ウィンドウ]-[CSS スタイル] を選択します。
  • Shift+F11 キーを押します。
  • プロパティインスペクタで [CSS] ボタンをクリックします。

[CSS] スタイルパネルでルールを編集するには ([現在] モード) :

1. [CSS] スタイルパネルの上部にある [現在] ボタンをクリックします。
2. 現在のページからテキストエレメントを選択してそのプロパティを表示します。
3. 以下のいずれかの操作を行います。

• [選択範囲のサマリー] ペインでプロパティをダブルクリックして [<プロパティ名> のCSS ルール定義] ダイアログボックスを表示し、変更を行います。
• [選択範囲のサマリー] ペインでプロパティを選択し、下の [プロパティ] ペインでそのプロパティを編集します。
• [ルール] ペインでルールを選択し、下の [プロパティ] ペインでルールのプロパティを編集します。

  メモ

  Dreamweaver の環境設定を変更すると、CSS 編集時のダブルクリックのビヘイビアと他のビヘイビアを変更できます。詳細については、Dreamweaver MX ヘルプのCSS スタイルの環境設定を参照してください。

[CSS] スタイルパネルでルールを編集するには ([すべて] モード) :

1. [CSS] スタイルパネルの上部にある [すべて] ボタンをクリックします。
2. 以下のいずれかの操作を行います。

• [すべてのルール] ペインでルールをダブルクリックして [CSS ルール定義] ダイアログボックスを表示し、変更を行います。
• [すべてのルール] ペインでルールを選択し、下の [プロパティ] ペインでルールのプロパティを編集します。
• [すべてのルール] ペインでルールを選択し、[CSS スタイルパネル] の右下隅にある [スタイルの編集] ボタンをクリックします。

  メモ

  Dreamweaver の環境設定を変更すると、CSS 編集時のダブルクリックのビヘイビアと他のビヘイビアを変更できます。詳細については、『Dreamweaver MX ヘルプ』のCSS スタイルの環境設定を参照してください。

ルールにプロパティを追加するには :

1. [すべてのルール] ペイン ([すべて] モード) でルールを選択するか、[選択範囲のサマリー] ペイン ([現在] モード) でプロパティを選択します。
2. 以下のいずれかの操作を行います。

• [プロパティ] ペインで [設定済みプロパティのみを表示] が選択されている場合は、[プロパティの追加] リンクをクリックしてプロパティを追加します。
• [プロパティ] ペインでカテゴリビューまたはリストビューが選択されている場合は、追加するプロパティの値を入力します。

[すべて] モードと [現在] モードの両方で、[CSS スタイル] パネルには、[プロパティ] ペイン (下のペイン) でビューを変更できる 3 つのボタンが含まれています。

カテゴリビューでは、Dreamweaver でサポートされる CSS プロパティが、フォント、背景、ブロック、ボーダー、ボックス、リスト、位置、拡張の 8 つのカテゴリに分類されます。各カテゴリのプロパティはリストに含まれます。このリストは、カテゴリ名の横にある [+] ボタンをクリックすることにより展開または縮小できます。設定されているプロパティがリストの上部に青色で表示されます。

リストビューには、Dreamweaver でサポートされるすべての CSS プロパティがアルファベット順で表示されます。設定されているプロパティがリストの上部に青色で表示されます。

設定済みのプロパティビュー では、設定済みプロパティのみが表示されます。設定済みのプロパティビューは初期設定のビューです。

[すべて] および [現在] モードの両方で、[CSS スタイル] パネルには以下のボタンが含まれます。

[スタイルシートを添付] をクリックすると、[外部スタイルシートのリンク] ダイアログボックスが表示されます。現在のドキュメントにリンクする、または読み込む外部スタイルシートを選択します。外部スタイルシートの添付の詳細については、外部 CSS スタイルシートのリンクまたは読み込みを参照してください。

[新規 CSS ルール] をクリックすると、作成するスタイルのタイプを選択できるダイアログボックスが表示されます。たとえば、このダイアログボックスでは、クラススタイルを作成するのか、HTML タグを再定義するのか、または CSS セレクタを定義するのかを選択できます。詳細については、CSS ルールの新規作成を参照してください。

[スタイルの編集] をクリックすると、現在のドキュメントまたは外部スタイルシートに定義されているスタイルを編集できるダイアログボックスが表示されます。スタイルシートの更新の詳細については、CSS ルールの編集を参照してください。

[CSS ルール定義] をクリックすると、選択したルールまたはプロパティが [CSS スタイル] パネルから削除され、そのスタイルが適用されていたすべてのエレメントからフォーマットが削除されます。ただし、そのスタイルの環境設定は削除されません。

関連トピック

• クラススタイルの適用
• 外部 CSS スタイルシートのリンクまたは読み込み
• CSS スタイルシートの編集