CSSをより使いやすく身近なものに

多くのDreamweaverユーザーが注目しているのは、CSS関連の機能ではないだろうか。こちらも制作効率の向上を重視した機能強化が図られている。まずは「関連ファイル」機能。HTMLファイルからリンクされているCSSファイルやJavaScriptファイルの名称が、ドキュメント上部にある関連ファイルツールバーに一覧表示されるようになった。ファイル名をクリックすると、関連ファイルがドキュメントウィンドウに開くので、コードの確認や編集に重宝する。

関連ファイル。ファイル名をクリックすると、コードが表示される

指定の場所に適用されているセレクタを確認したいときは、「コードナビゲータ」機能を利用する。コードナビゲータはその場に表示されるので、CSSスタイルパネルで確認するよりも直感的で見やすい。コードナビゲータのセレクタ名にマウスカーソルを重ねると、プロパティの内容が表示される。また、セレクタ名をクリックすると、コードビューにCSSファイルが開き、該当するセレクタが表示される。

コードナビゲータ。セレクタ名にマウスカーソルを重ねると、CSSプロパティの定義内容が表示される	セレクタ名をクリックすると、コードビューに関連ファイルが開いて該当する箇所が表示される

コードナビゲータを表示するには、Altキー(Windows)またはOpt＋Cmdキー(Macintosh)を押しながら、ドキュメント上をクリックする。もしくはドキュメントをクリックしてから、マウスを操作せずに少しの間待つと、船舵のような形をしたインジケータが表示されるので、これをクリックしてもよい。

インジケータをクリックしてもコードナビゲータが表示される

文書構造や文字属性、リンクの指定に使われる「プロパティパネル」は、HTMLモードとCSSモードをボタンクリックで切り替える方式に変更された。また旧バージョンでは、CSSモードで文字装飾や文字サイズを指定すると自動的にクラスセレクタが作られたが、その点を改良。CS4では、CSSルールを定義する「新規CSSルール」画面が表示され、必要に応じてクラスセレクタを作成する形に変更された。

プロパティパネル(HTML)

プロパティパネル(CSS)

CSSスタイルを作成する「新規CSSルール」画面では、子孫セレクタや疑似セレクタなどを定義する「複合」(※前バージョンでは「詳細設定」)が使いやすくなった。「複合」のセレクタ名は選択位置の要素にあわせて付けられるが、新バージョンでは「省略化」ボタンと「詳細化」ボタンが用意され、ボタンをクリックするだけでセレクタの範囲を調整できるようになった。また、ダイアログにはセレクタの説明書きが表示され、初心者にも使いやすいものになっている。

「新規CSSルール」画面。現在のセレクタ名は「#contents #main p」	「省略化」ボタンをクリックすると「#contents」が省略されて「#main p」になる