Dreamweaver記事
Dreamweaver CS3で強化されたCSSまわりの機能総点検
この記事では、Adobe® Dreamweaver® CS3で強化されたCSS関連の機能の中でも、CSSのコードフォーマットとCSSパネルについて解説し、実際のワークフローにどのように落とし込む方法についてご紹介します。
必要ソフトウェア
この記事では、以下のソフトウェアを使用しています。
Dreamweaver CS3
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へのソースフォーマットの適用と同様に、選択範囲のみにフォーマットを適用できるようになることを期待します。
著者について
鷹野雅弘（Masahiro Takano）
Webサイトの構築やコンサルティングを行う傍ら、WebやDTPに関するトレーニングや執筆活動を行う。
著書に『できるクリエーターDreamweaver独習ナビ』（インプレス）、『Adobe Dreamweaver CS3 Essential Book』（毎日コミュニケーションズ）など、編著書に『Dreamweaverプロフェッショナル・スタイル［CS3対応］』など。
CSS Niteを主宰。
