Dreamweaver記事

［CSSスタイル］パネルの徹底活用

はじめに

この記事では、Adobe® Dreamweaver® CS3の［CSSスタイル］パネルと、CSS適用の優先順位の理解について解説します。

なお、この記事では「CSS宣言」「CSSルール」を次のように定義していて記載しています。

• CSS宣言：プロパティ＋値（例：padding: 3px 6px;）
• CSSルール：セレクタと宣言のセット（例：#main ul {padding: 0;margin: 0;}）

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

• 体験版
• 購入

Dreamweaver CS3の［CSSスタイル］パネル

改めてDreamweaverの［CSSスタイル］パネルを確認してみましょう。
まず最上部には［すべて］と［現在］の切り替えボタンがあります。

［すべて］

［すべて］が選択されている状態では、［CSSスタイル］パネルは上下2つに分割されます。上部には、セレクタ一覧が表示されます。ほかのCSSファイルを参照しているときには、そのファイル名が、style要素を使って（エンベッドで）記述している場合には<style>と表示され、それぞれその中のセレクタが一覧表示されます。
上部でセレクタを選択すると、そのセレクタ内に記述されているCSS宣言が、［CSSスタイル］パネルの下部にリストアップされます。

「プロパティ」の列は変更できませんが、ポップアップメニューから選択したり、直接値を入力するなどの方法で「値」を変更することができます。なお、値を選択して削除すると、プロパティごと削除されます。

選択しているルール内に、新しい宣言を追加するには［プロパティの追加］をクリックし、 キーボードから入力するかポップアップメニューから選択する方法があります。CSSのプロパティへの理解が深まったら、［CSSスタイル］パネルの下部を使うことで、［CSSルール定義］ダイアログボックスを使うより、ずっとスピーディに作業を進めることができるでしょう。

［現在］

非常に便利でありながら、なかなか活用されていないのが［現在］ボタンです。
HTML/XHTMLファイルを開いている際、［現在］ボタンをクリックすると、カーソルのある位置に応じてその要素にどんなCSSルールが適用されているかをリストアップしてくれます。この際、Dreamweaverのドキュメントウインドウ下部のタグセレクタを使って、意識的に調べたいタグを選択するとよいでしょう。

［現在］モードでは、［CSSスタイル］パネルは3ペイン（3分割）で表示されます。最上部は［選択範囲のサマリー］。選択している要素に適用されているCSS宣言（プロパティ＋値）が一覧表示されます。
少しわかりにくいのが中央部。右上に小さいボタンが2つあります。左側の［選択したプロパティに関する情報を表示］を選択すると「colorはルール"a:hover, a:visited:hover"で、mt4lp5.css内に定義されています」のように表示されます。

つまり、上部の［選択範囲のサマリー］で選択したプロパティが、どのCSSルール／どのファイルに記述されているかを教えてくれます。
右側のボタン［選択したタグのルールを重ねて表示］をクリックすると、選択した要素に対して適用されているCSSルールのセレクタが一覧表示されます。

CSSを記述する上でやっかいなこと

CSSレイアウトをはじめて、最初につまづくことのひとつに「CSSが意図通りに反映されない」という悩みがあるでしょう。スペルミスなどを除き、CSSルールが適用されないときには、優先順位を考えてみましょう。
たとえば、下記のように記述すると、後から書いた方が優先されます。

p {color: #ff000;} /* red */
p {color: #000000; } /* black */ 

ひとつのファイルであれば単純ですが、CSSファイルを分割している際には、その読み込み順序にも注意する必要があります。

適用されていないCSS宣言を調べる

Dreamweaverの［CSSスタイル］パネルで［現在］モードを選択している際、下部のプロパティに取り消し線がついていることがあります。

このとき、そのプロパティにマウスオーバーすると、たとえば「text-decorationはルールa:linkによって上書きされているので、選択範囲には適用されません」のように、なぜ、適用されないかを調べることができます。

!important宣言とユーザースタイルシート

次に「!important宣言」。これをつけると優先順位が上がるという魔法のような存在ですが、多用するとかえって混乱してしまうでしょう。また、Internet Explorer 6で使えません。
なお、優先順位についてはこのような解説を見かけます。
ユーザースタイルシートを作成し、「!important」を使ってブラウザに読み込ませることで、制作者のスタイルよりも優先させることができます。

1. !important 宣言付きユーザースタイルシート
2. !important 宣言付き制作者スタイルシート
3. 制作者スタイルシート
4. ユーザースタイルシート

ブラウザも「ブラウザスタイル」というどの要素をどのように扱うかについてスタイルを持っています。MacのFirefoxであれば、/Applications/Firefox.app/Contents/MacOS/res/html.cssで確認することができます。

特異性（specificity）を理解する

たとえば、次のように書かれていた場合、後に記述した「p {color: #000000; } 」よりも「#main p {color: #ff000;} 」が優先されます。

#main p {color: #ff000;} /* red */
p {color: #000000; } /* black */ 

『 Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 』著者である加藤 善規さんが「WWW WATCH」の中で、「同じ山田さんを示すにも“日本の山田さん” より“東京都○○町の山田さん” を優先するわけです」と解説されています。この例のように特定できる度合いが高いほど、そのCSSルールは優先されます。 これを「specificity」と呼びます。Dreamweaverでは「特異性」と呼んでいますが、「個別性」「特殊性」など、さまざまな日本語訳が行われています。

この特異性は、簡単な計算方法により点数が高い方が優先されることになっています。W3Cの仕様書では「6.4.3 Calculating a selector's specificity」に記述されています。 ざっくりカンタンに解説すると、次のようになっています。

• style 属性がある場合は1000点
• セレクタに含まれている id 属性の数をカウント×100点
• セレクタに含まれている id 以外の属性と、擬似クラスの数をカウントし、×10点
• セレクタに含まれている 要素、擬似要素の数をカウント×1点

先ほどの「p {color: #000000; } 」は1点。「#main p {color: #ff000;} 」は101点と計算できます。

Dreamweaverで特異性を調べる

Dreamweaverの［CSSスタイル］パネルで［現在］モードで、［選択したタグのルールを重ねて表示］を選択している際、中央部のセレクタにマウスオーバーすると、「このルールはファイルsw.cssに特異性0,0,2」で定義されています。次のように表示されます。

さきほどご紹介した点数計算のうち、Dreamweaverでは「style 属性がある場合は1000点」を除いて計算します。「0,0,2」は2点。「4,0,1」は401点と理解できます。

まとめ

記述したCSSが反映されない場合には、CSSの優先順位について考えてみましょう。
Dreamweaverの［CSSスタイル］パネルでは、適用されていないCSS宣言を調べることができます。
また、優先順位を考える上で重要なCSS特異性（specificity）も［CSSスタイル］パネル内で調べることができるのです。

最後に、［CSSスタイル］パネル内で右クリックすると、表示されるメニューの一番上に［コードへ移動］というコマンドが表示されます。
CSSのソースコードを直接さわりたい場合には、［コードへ移動］を利用すれば、即座に目的の場所にジャンプしますので、長～いCSSファイル内を探し回る手間から解放されます。

著者について