Dreamweaver CS3で強化されたCSSまわりの機能総点検

CSSパネルの改良

CSSパネルは、Dreamweaver MX2004からDreamweaver 8にバージョンアップする時点で大きく変わりました。Dreamweaver 8からDreamweaver CS3は、一見、違いがわかりにくいのですが、さりげなくパワーアップしています。

セレクタ名の変更

セレクタ名を変更したい場合には、そのセレクタ上で右クリックして［コードへ移動］を選択、CSSファイル上で変更する手順を取っていました。

Dreamweaver CS3でセレクタ名を変更したいときには、［CSSスタイル］パネルでセレクタを選択し、［F2］キーを押します（またはクリック後、ゆっくりと再度クリックします）。するとセレクタ名が反転しますので、パネル上でセレクタ名を変更します。
もちろん、「,」でセレクタを追加することもできます。

セレクタの順番の変更

［CSSスタイル］パネルでセレクタのドラッグ&ドロップして、順番を変更することができるようになっています。
これはもちろん、正確にはセレクタの順番ではなく、ルール（セレクタ{宣言}）の順番を変更しています。

セレクタの移動

CSSファイルからCSSファイルへ、または、HTMLファイルの内にエンベッドしたCSSルールを、リンクしているCSSファイルへと［CSSスタイル］パネルでセレクタのドラッグ&ドロップして移動することができます。
optionキーを押しながらドラッグして複製することもできます。

最後に、ひとつバッド・ノウハウともいうべき裏技をご紹介しましょう。
Dreamweaverの［CSSスタイル］パネルには、セレクタをカラーリングしたり、区切り線を入れたり、グルーピングするなどの機能はありません。
そこで、新規CSSルールを作成する際、［セレクタ］タイプを「クラス」に設定し、［名前］に「.--------------」のように指定します。すると、［CSSスタイル］パネルで擬似的な区切り線を表示することができます。もちろん、納品時には絶対に削除しておく必要がありますが、目的のセレクタを探しやすく、また、CSSファイルの構造を俯瞰しやすくなります。

ページ 2 / 2

前のページ