今回は、CSS に関する機能について見ていきましょう。
秀逸な [新しいスタイル] ダイアログボックス
[スタイルの管理] パレットで [新しいスタイル...] をクリックすると、開く [新しいスタイル...] ダイアログボックスは、一見、Dreamweaver のそれとよく似ていますが、細かい改良点が見られます。なお、[新しいスタイル...] ダイアログボックスは、スタイルの編集時には [スタイルの変更] ダイアログボックスになります。
新しいスタイルを作成するには、[スタイルの管理] パレットで [新しいスタイル...] をクリックする。
プロパティ名が原文のまま
Dreamweaver の場合、[CSS ルール定義] ダイアログボックスの項目名はローカライズされ、日本語で表示されます。項目名は CSS のプロパティ名ですので、ローカライズされている場合、再度 「この項目名はこのプロパティ」 とアタマの中で再変換する必要が生じてしまいます。プロパティ名が原文のままなのは理にかなっています。
[説明]
ダイアログボックス下部の [説明] 欄には、ダイアログボックスで設定したルールがどのように記述されるのかが表示されます。これも嬉しい機能です。ただし、ここは [説明] でなく [コード] のような項目名の方がわかりやすいですね。さらに、本当の [説明] として、各プロパティに関しての説明があると嬉しいです。
[新しいスタイルをドキュメントの選択範囲に適用する]
クラスと呼ばれる 「.」 からはじまる CSS のルールを作成したときには、HTML / XHTML 内に 「class="クラス名"」 のように付け加える必要があります。Expression® Web の場合、[新しいスタイルをドキュメントの選択範囲に適用する] にチェックをつけておけば、 (1) 設定箇所を選択、 (2) スタイルを作成、という流れで、自動的にクラスが設定されるので、一手間省けます。
設定した内容は、ダイアログボックス下部の [説明] 欄にコードとして表示される。
CSS ボックスモデルの参考図
[ボックス] カテゴリを選択した場合には、padding/border/margin がそれぞれどこを示すのかの 「CSSボックスモデルの参考図」 が表示されます。これは CSS 初心者に嬉しい機能です。Padding や margin で設定した値が、この参考図とリンクすればさらにいいですね。また、padding/margin は、値を簡略表示 (ショートハンド) が可能ですが、ダイアログボックス内でこの設定が行えるとさらにいい感じです。
「CSS ボックスモデルの参考図」 は CSS 初心者には嬉しい。
CSS ルールの作成時： [テーブル] カテゴリがある (border-collapseプロパティ)
[テーブル] カテゴリには、「border-collapse」 プロパティの設定箇所があります。テーブルのセルとセルとの間隔を CSS で調整する場合、border-collapse:collapse のように設定したりしますが、Dreamweaver の [CSS ルール定義] ダイアログボックスでは、これをサポートしていません。あって当然なのですが、なにげに嬉しい機能です。
[テーブル] カテゴリには、「border-collapse」 プロパティで 「copplase」 を設定可能。
まとめ
- 単純に後発だからという理由だけでなく、[新しいスタイル] ダイアログボックスは、スタイル適用の作業ワークフロをよく吟味していると感じます。
