前編では、「Adobe Dreamweaver CS5」の新機能や強化機能のうち、主にCMS関連の機能を紹介した。今回は、コーディングの中でもトライアンドエラーが多いCSSのコーディングについて新機能を中心に解説していく。

「Adobe CS5」体験版はこちらから

CSSのコーディングのための「Dreamweaver CS5」新機能

CSSのコーディングは、CSS単体で済むというわけではなく、必ずHTMLとセットでコーディングが進められていく。というのも、HTMLのどの部分を、どのようにスタイリングするかという指定がWeb制作におけるCSSの使用用途の大部分を占めるからである。

CSSのコーディングにおいて、Dreamweaverに求められる機能は、今までは大きく分けると3つあった。「CSSの指定をしやすくする機能」、「CSSが適用されたページを確認する機能」、「CSSがある程度適用された状態からコーディングをはじめる機能」の3つである。今回は、「CSSの指定をしやすくする機能」について解説していきたいと思う。

「CSSインスペクト」が新に追加された

まずは「CSSの指定をしやすくする機能」について。Dreamweaverでは、古くからCSSのライブプレビュー機能が充実していた。HTMLを編集している時でも、デザインビューには、CSSが反映されたかたちでプレビューが表示することが出来ていた。もちろん、当初はCSSの表示再現度が低かったものの、バージョンが上がるごとに再現度が増していき、「Dreamweaver CS4」で遂にSafariやChromeで使われているHTMLレンダリングエンジン「Webkit」を採用したことで、実際の表示に限りなく近づくことが出来るようになった。

おかげでCSSを指定しながらリアルタイムに表示を確認していくことが出来るようになった。CSSの編集の方法は大きく分けて2種類あり、CSSファイル自体を編集する方法と、CSSスタイルパネルから編集する方法が存在していた。

CSSスタイルパネルからCSSを編集する方法では、現在選択しているタグもしくは、デザインモードでカーソルがある位置のスタイルが、CSSスタイルパネル上に表示され、編集できるという仕組みになっていた。デザインモードで選択した範囲のCSSを編集する場合だけでも十分に直感的ではあったが、Dreamweaver CS5では、「CSSインスペクト」という編集方法が新たに用意された。

CSSインスペクトのボタンを押すと、インスペクトモードになる

皆さんはFirefoxのFireBugというアドオンを使ったことがあるだろうか? FireBugでは、ページの調べたい要素をクリックして調べる機能があり、要素を選択する際は、その要素がどういうボックスになっているかを表示してくれる機能がある。おまけに、そのボックスにどれくらいマージンがあるかといった情報まで半透明な黄色で表示してくれたりする。こういった機能は他のブラウザでも開発ツールとして組み込まれており、HTML/CSSの表示バグ割り出しの際に大変役立つものであった。

FireBugではページ内の要素がどういうボックス指定になっているかを見ることが出来るだけでなく、適用されているCSSを見ることもできる

「Dreamweaver CS5」のインスペクトモードではFireBugと同等の機能をDreamweaver上で行なうことが出来る。つまり、要素の確認だけでなく編集まで行なえるのだ

上記のように、Dreamweaver CS5で備わったCSSインスペクトは大変使い易い機能だ。HTMLを開いてデザインビューにした際にメニュー上部に表示される[インスペクト]というボタンをクリックすることで、インスペクトモードという状態に入る。

この状態では、直接ページを編集することは出来ないが、カーソルを合わせた箇所のボックスがどういう状態になっているかをグラフィカルに表示することが出来る。ボックスの内容部分は水色で、マージンは黄色で、パディングは紫色で表示される。これによりカーソルを合わせた要素が周りにどういう影響を与えているかが一目でわかるようになった。

[CSSスタイル]パネルからプロパティをクリックすることで、直接編集できる

CSSを編集したいボックスに遭遇したら、その場でクリックすると、[CSSスタイル]パネルの[現在]タブにCSSのプロパティが表示される。ここで編集を行なうことで、デザインビューに反映させていくことが出来る。

[CSSスタイル]パネルからプロパティの左側をクリックすると、個別のCSSプロパティの無効化が行なえる

Dreamweaver CS5では、[CSSスタイル]パネルにもうひとつ新しい機能が備わっている。一時的に特定のCSSプロパティを無効化できるという機能だ。文字色を設定した後で、一時的に無効化して確認してみたいのだが、設定した色を削除してしまいたくない。こんな場合に使える機能だ。

そんな時は[CSSスタイル]パネルのCSSプロパティの左側の空白部分にカーソルを合わせてみよう。灰色の通行禁止マークが表示されるはずだ。これをクリックすると赤色の通行禁止マークになる。この状態のCSSプロパティはデザインビューには反映されない仕組みとなっている。CSSの表示不具合などの調査でも特定のプロパティを無効化したりすることがあるが、この機能は、そういった調査目的にも使える。

次回は「CSSが適用されたページを確認する機能」などについて、徹底解説していく予定だ。