Dreamweaver CS3 で強化された CSS まわりの機能総点検
今月号の記事
- Allurent：次世代eコマースエクスペリエンス
- Webベースで動作する初のワードプロセッサBuzzword
- Dreamweaver CS3で強化されたCSSまわりの機能総点検
- 2007年ベストFlashサイトby the FWA
- Edge最新ニュース／イベント・セミナー情報
Dreamweaver デベロッパーセンターより
この記事では、Adobe Dreamweaver CS3 で強化された CSS 関連の機能の中でも、CSS のコードフォーマットと CSS パネルについて解説し、実際のワークフローにどのように落とし込む方法についてご紹介します。
HTMLと同様、CSS の記述方法にもさまざまなスタイルがあります。ほかのサイトのコード“資産”を流用したり、流儀が異なる人とコラボレーションする際、容易に乱れてしまいます。
綺麗なコードは見た目だけではありません。編集箇所をスピーディに見つけたり、ミスを見つけやすくするなどの効果もあるので、ルールにのっとり整然と記述することには意義があります。
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 スタイルパネルの改良
CSS スタイルパネルは、Dreamweaver MX2004 から Dreamweaver 8 にバージョンアップする時点で大きく変わりました。Dreamweaver 8 から Dreamweaver CS3 へは、一見違いがわかりにくいのですが、さりげなくパワーアップしています。
セレクタ名の変更
Dreamweaver 8 でセレクタ名を変更したい場合には、そのセレクタ上で右クリックして［コードへ移動］を選択、CSS ファイル上で変更する手順を取っていました。
Dreamweaver CS3 でセレクタ名を変更したいときには、［CSS スタイル］パネルでセレクタを選択し、［F2］キーを押します（またはクリック後、ゆっくりと再度クリックします）。するとセレクタ名が反転しますので、直接パネル上でセレクタ名を変更します。
もちろん、「,(カンマ)」でセレクタを追加することもできます。
セレクタの順番の変更
［CSSスタイル］パネルでセレクタのドラッグ&ドロップして、順番を変更することができるようになっています。
これはもちろん、正確にはセレクタの順番ではなく、ルール（セレクタ{宣言}）の順番を変更しています。
セレクタの移動
CSS ファイルから CSS ファイルへ、または、HTML ファイルの<head>内にエンベッドした CSS ルールを、リンクしている CSS ファイルへと［CSSスタイル］パネルでセレクタのドラッグ&ドロップして移動することができます。
さらに、option キーを押しながらドラッグすることで複製することもできます。
最後に、ひとつバッド・ノウハウともいうべき裏技をご紹介しましょう。
Dreamweaver の［CSSスタイル］パネルには、セレクタをカラーリングしたり、区切り線を入れたり、グルーピングするなどの機能はありません。
そこで、新規 CSS ルールを作成する際、［セレクタ］タイプを「クラス」に設定し、［名前］に.--------------のように指定します。すると、［CSSスタイル］パネルで擬似的な区切り線を表示することができます。もちろん、納品時には絶対に削除しておく必要がありますが、目的のセレクタを探しやすく、また、CSSファイルの構造を俯瞰しやすくなります。
擬似的な区切り線を作成
CSSレイアウトに関する Dreamweaver Tipsをお持ちの方、大募集！
2008年2月20日（水）に開催される Dreamweaver 10周年記念イベントでは、大喜利セッションへの出演チャレンジャーを募集しております。本記事を読んでDreamweaver CS3のCSS関連機能の強化部分を確認し、我こそはと腕に自身のある方はぜひ大喜利セッションへチャレンジください。イベントの詳細および大喜利参加方法はこちらをご覧ください。
Webサイトの構築やコンサルティングを行う傍ら、WebやDTPに関するトレーニングや執筆活動を行う。
著書に『できるクリエーターDreamweaver独習ナビ』（インプレス）、『Adobe Dreamweaver CS3 Essential Book』（毎日コミュニケーションズ）など、編著書に『Dreamweaverプロフェッショナル・スタイル［CS3対応］』など。CSS Niteを主宰。
