現在のページで使用されているスタイルを表示
デフォルトでは、画面右下に配置されている [スタイルの管理] パネルでは、開いているドキュメントにリンクしている CSS ファイル内のセレクタ (CSS ルール) が一覧表示されます。
[オプション] ボタンをクリックして表示されるメニューでは、[すべてのスタイルを表示] 、[現在のページで使用されているスタイルを表示] 、[選択範囲で使用されているスタイルを表示] を選択することができます。
それぞれ文字通りの意味ですが、[現在のページで使用されているスタイルを表示] は Dreamweaver にはない機能です。
[選択範囲で使用されているスタイルを表示] を選択すると、表示されるスタイルが限定される
選択している CSS ルールの詳細を表示する
デフォルトでは、画面左下に配置されている [CSS のプロパティ] パネルでは、開いているドキュメントで選択した箇所に対して適用されている CSS ルールが一覧表示されます。
パネルは上下二分割になっていて、下部には CSS のプロパティがカテゴリごとに表示されます。
パネル右上にある [概要] ボタンをクリックすると、選択しているルールに対応するプロパティのみが表示されます。
この機能は Dreamweaver の [CSS スタイル] パネルの [現在] ボタンと同様と考えてよいでしょう。
[概要] ボタンを 2 回クリックしないと適用されないことがある。
高いレンダリング精度
CSS レイアウトを行う際のレンダリング精度です。
Expression® Web では、Web 標準にコミットした Internet Explorer 8 の開発の影響もあり、CSS レイアウトの再現性に優れています。
Dreamweaver では、ネガティブ マージンをはじめ "苦手" とするものがあり、少し意地悪なサンプルですが、現時点では、デザイン ビューで完結できる Expression® Web のポイントは高いといえます。
欲をいえば、まだまだ残ると思われる Internet Explorer 6 のレンダリングの切り替えを Expression® Web で行えると、チェック作業が軽減できます。
Expresison® Web での表示
同じページを Dreamweaver CS3 で表示すると大きく崩れてしまっている
まとめ
- CSS レイアウトを行う際、CSS ファイルに記述されている中で編集したいルールを、いかにスピーディに選択するかが作業効率の上で重要ですが、[スタイルの管理] パネルの [現在のページで使用されているスタイルを表示] 、[選択範囲で使用されているスタイルを表示] は使える機能です。
- Expression® Web のデザイン ビューのレンダリング精度は高いです。
