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

この記事では、Adobe® Dreamweaver® CS3で強化されたCSS関連の機能の中でも、CSSのコードフォーマットとCSSパネルについて解説し、実際のワークフローにどのように落とし込む方法についてご紹介します。

CSSコードフォーマット

HTMLと同様、CSSの記述方法にもさまざまなスタイルがあります。ほかのサイトのコード“資産”を流用したり、流儀が異なる人とコラボレーションする際、容易に乱れてしまいます。綺麗なコードは見た目だけではありません。編集箇所をスピーディに見つけたり、ミスを見つけやすくするなどの効果もあるので、ルールにのっとり整然と記述することには意義があります。

HTMLのソースコードには、［ソースフォーマットの適用］という機能が用意されていますが、Adobe® Dreamweaver® CS3では、CSSにも同様の機能が追加されました。

まずは［Dreamweaver］→［環境設定］（Windowsでは［編集］→［環境設定］）を選択して、［環境設定］ダイアログボックスが開いたら、［コードフォーマット］カテゴリに切り替えます。

［高度なフォーマット］の［CSS...］ボタンをクリックすると、［CSSソースフォーマットオプション］が開きます。
設定を変更すると、ダイアログボックス下部のサンプルコードに反映します。
それぞれの設定を確認していきましょう。

• プロパティをインデント
  「color:#000000;」のようにプロパティの左側の空白部分（インデント）にタブを入れるか、スペースを入れるかを規定します。1タブを挿入するのが一般的です。
• 行ごとにプロパティ
  正確には「プロパティ:値;」（宣言）ごとに改行を行うという設定です。一般的にはオンにしておきます。［複数のプロパティのみ］にチェックをつけると、「プロパティ:値;」（宣言）がひとつだけの場合には、ルールが1行になります。
• 同じ行にルールのすべてのセレクタ
  セレクタを「,」でつなげて複数設定する際、これを改行するかどうかを設定します。
• ルール間に空白行
  文字通りルール間に空白行を入れるかどうかを設定します。

少しでもバイト数を減らしてCSSファイルを軽くしたいのか、後からの編集にも対応しやすくしたいのか、また、CSSのソースコードを読みやすくしたいのかなどの観点でこれらの設定を検討してみましょう。

設定が終了したら、［環境設定］ダイアログボックスを閉じ、CSSファイルを開いて［コマンド］メニューの［ソースフォーマットの適用］をクリックすると、設定したフォーマットに準じてコードが整形されます。

待ち望んできた機能ですが、［ソースフォーマットの適用］はファイル全体が対象となってしまいます。たとえば「#beta ul li a, #beta ul li a:hover」のような場合には改行した方が見やすくなりますが「h1, h2, h3, h4, h5, h6」のようなセレクタは改行しない方が見やすいですよね。
次のバージョンでは、HTMLへのソースフォーマットの適用と同様に、選択範囲のみにフォーマットを適用できるようになることを期待します。

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ファイルの構造を俯瞰しやすくなります。