アクセシビリティ
デベロッパーリソース

目次

  1. はじめに
  2. ユーザーインターフェイスの変更点
  3. Dreamweaver のデザインビューの視覚的な表示
  4. 変更された点と変更されていない点
  5. ミニワークフローの推奨事項
  6. 単純なスタイルの迅速な生成および利用
  7. ページにコンテンツを追加しながら CSS を設定
  8. Dreamweaver を使ったルールの理解
  9. [CSS スタイル] パネルを使用したプロパティの作成と編集
  10. ドキュメントスタイルシートから外部スタイルシートへの移行

Dreamweaver 8 の CSS 機能について

ユーザーインターフェイスの変更点

Dreamweaver 8 では、Dreamweaver MX 2004 で導入された CSS 固有のユーザーインターフェイス要素の多くが引き継がれています。実際、MX 2004 で選択されたインターフェイスはこのバージョンのワークフローにとっても重要なので、ここでは変更されていないインターフェイス要素についても説明しています。このバージョンでは、既存のインターフェイスを基に、ユーザーのワークフローを効率化するための機能が強化されています。

プロパティインスペクタ

プロパティインスペクタの変更点は、[CSS]/[CSS の編集] ボタンが導入されたことだけです。このボタンによって、開発者は [CSS スタイル] パネルで適切な定義にすばやくアクセスすることができます。既に [CSS スタイル] パネルを開いている場合は、[CSS] ボタンはグレー表示されます。次の図は、スタイルが設定された段落 <P> タグを選択したところですが、既にこのスタイルの [CSS スタイル] パネルが開いているので、[CSS] ボタンは無効になっています。

選択したスタイルについて [CSS スタイル] パネルが既に開いているために [CSS] ボタンがグレー表示されている Dreamweaver 8 のプロパティインスペクタ

図 1. 選択したスタイルについて [CSS スタイル] パネルが既に開いているために [CSS] ボタンがグレー表示されている Dreamweaver 8 のプロパティインスペクタ

(+) 拡大表示

[CSS スタイル] パネル

[CSS スタイル] パネルにはいくつかの変更が加えられており、これらの変更点は特に外部 CSS エディタを使用する開発者にとって興味深いものです。

最初の変更点は非常にわずかなものです。[CSS スタイル] パネルと [レイヤー] パネルを含むパネルのグループ化は CSS と呼ばれます。図 2 に示されているように、この変更はごくわずかなものですが、ユーザーは適切なパネルグループをすばやく見つけることができるようになります。

パネルグループ名が CSS に変更され使いやすさが向上

図 2. パネルグループ名が CSS に変更され使いやすさが向上

メモ : 図 2 のように [CSS] パネルグループを折りたたんでいる場合、プロパティインスペクタで [CSS] ボタンをクリックすると [CSS スタイル] パネルが開きます。したがって、ユーザーは常にこのパネルグループを見つけることができます。

[CSS スタイル] パネルを開くと、Dreamweaver 8 での変更点はより明確になり、ユーザーはとまどうことがあるかもしれません。

[CSS スタイル] パネルには、[すべて] と [現在] の 2 つのモードがあります。私自身もこの命名法は混乱を招くのではないかと思います。ただし、混乱することがあるかもしれないというのは、あまりに単純であるためです。すべてモードでは、ページ全体に影響する宣言、つまり原則的に "すべて" の宣言のリストが表示されます。現在モードでは、現在のエレメントに影響する CSS 宣言が表示されます。どうでしょうか。とまどう理由は何もありません。

現在モード

現在モードの [CSS スタイル] パネルには、[選択範囲のサマリー]、[ルール]、[プロパティ] の 3 つの情報が表示されます。図 3 は、青の 12 ピクセルの Geneva フォントで表示されるように再定義された段落に挿入ポイントを置いた場合に表示される内容です。

青の 12 ピクセルの Geneva フォントで表示されるように再定義された段落に挿入ポイントを置いた場合の、現在モードの [CSS スタイル] パネル

図 3. 青の 12 ピクセルの Geneva フォントで表示されるように再定義された段落に挿入ポイントを置いた場合の、現在モードの [CSS スタイル] パネル

[サマリー] カテゴリには、選択範囲 (この場合は現在選択している段落) の表示に影響する属性だけが表示されます。hilite_text というクラススタイルが割り当てられた別の段落内をクリックした場合、[CSS スタイル] パネルの [サマリー] カテゴリには、段落タグの再定義で定義されているカラー (#0000FF) ではなく、図 4 のようにこのクラススタイルで定義されている新しいカラー (#99FF66) が表示されます。

hilite_text スタイルクラスの情報を表示する [CSS スタイル] パネルの [サマリー]、[ルール]、および [プロパティ] カテゴリ

図 4. hilite_text スタイルクラスの情報を表示する [CSS スタイル] パネルの [サマリー]、[ルール]、および [プロパティ] カテゴリ

[ルール] カテゴリには、現在の選択範囲に影響するルールの階層が表示されます。この例として、図 4 を参照してください。図 4 では、階層の最初に body タグで定義されるスタイルがあります。このルールで定義されている属性は、選択範囲に "より近い" ルールと矛盾しているので、これらの属性は [サマリー] セクションには表示されません。CSS の用語では、この "近さ" を詳細度と言います。詳細度の詳細については、W3C サイト* を参照してください。階層の次の項目は段落タグの再定義によって設定される属性ですが、現在の選択範囲に影響するのは font-family 属性と font-size 属性だけです。最終的なルールは hilite_text クラススタイルで、テキストのカラーのみを定義しています。

[ルール] セクションの内側のボタンをクリックすることによって、すばらしい代替情報を表示できます。この [詳細] カテゴリには、図 5 のように、現在選択しているプロパティに関する役に立つ情報が表示されます。選択されているプロパティは、[詳細] カテゴリの見出しが示しているように color プロパティです。[詳細] カテゴリは、どのルールが特定のプロパティを格納しているか、およびそのルールが定義されている場所を示します。

特定のプロパティが格納されているルール、およびそのルールが定義されている場所を示す現在モードの [詳細] カテゴリ

図 5. 特定のプロパティが格納されているルール、およびそのルールが定義されている場所を示す現在モードの [詳細] カテゴリ

次は [CSS スタイル] パネルの [プロパティ] カテゴリです。[サマリー] カテゴリで任意のプロパティをクリックするか、[ルール] カテゴリでルールをクリックすると、対応するルールで定義されているプロパティが [プロパティ] カテゴリに表示されます。[プロパティ] カテゴリは、選択範囲に影響しているプロパティも示します。上位の階層にあり、矛盾するすべてのプロパティについては、プロパティ名に取り消し線が表示されます。"csstest.htm" ファイルの最初の行にある "highlighted" という単語を選択し、[ルール] カテゴリで <body> タグを選択して、このことを確認してください。[プロパティ] カテゴリでは、font-family と font-size がいずれも取り消し線付きで表示されることがわかります。これは、<body> タグで font-family および font-size について定義されているプロパティが、<p> タグで定義されている font-family および font-size のプロパティと矛盾するからです。<p> タグのプロパティは、ハイライト表示された選択範囲に "より近い" ので、<body> タグのルールをオーバーライドします。

メモ : 後でこの記事の中で "csstest.html" ファイルを作成しますが、現時点ではサンプルファイル内の "csstest.html" ファイルを使用してもかまいません。

[プロパティ] カテゴリはこのパネルの重要な部分です。定義済みのプロパティの詳細を編集する (たとえば、.hilite_text で定義されている color プロパティを #99FF66 から別のカラーに変更するには、カラーボックスをクリックするか、新しいカラー値を入力するだけです) だけでなく、ルールにプロパティを追加することもできます。[プロパティの追加] リンクをクリックすると、Dreamweaver とは異なる方法で CSS スタイルを定義できますが、詳細については「ユーザーのワークフロー」の項で説明します。

すべてモード

[CSS スタイル] パネルのすべてモードでは、ページで利用できるすべてのルールが表示されます。それらのルールがページの head で定義されているか、またはページからリンクまたは読み込まれる別のスタイルシートで定義されているかは関係ありません。図 6 に示されているように、ルールは定義されている場所によって区分されています。ドキュメントの head で定義されているルールは <style> の下に表示され、スタイルシートで定義されているルールはスタイルシート名の下に表示されます。

メモ : インラインスタイル (タグ自体で定義されるスタイル) はすべてモードでは表示されませんが、現在モードでは必要に応じて表示されます。

定義されている場所に応じてルールを区分して表示するすべてモードの [CSS スタイル] パネル

図 6. 定義されている場所に応じてルールを区分して表示するすべてモードの [CSS スタイル] パネル

[すべてのルール] カテゴリのルールのリストに加えて、現在モードと同様のプロパティシートもあります。このモードは、ページで利用できるルールを表示および整理する点で、使い慣れた Dreamweaver MX 2004 の [CSS スタイル] パネルに似ています。異なる点 (とても優れている点) は、プロパティシートで、選択したルールのプロパティの表示、プロパティの変更、ルールへのプロパティの追加ができることです。すべてのプロパティを表示するために、パネルの幅が 500 ピクセルくらいあればよいのにと願う日々は過去のものとなりました。

プロパティシート

プロパティシートは非常に強力であるため、それ自体のセクションが用意されています。既に説明したように、プロパティシートはすべてモードと現在モードの両方で利用できます。鋭い Dreamweaver MX 2004 ユーザーは、このプロパティシートと [関連 CSS] パネル (プロパティシートに置き換えられた) の類似点に気が付くはずです。このユーザーインターフェイス要素の機能と柔軟性は、Dreamweaver 8 を使用するにつれて徐々に理解されていくでしょう。ワークフローでのこのユーザーインターフェイス要素の使用方法について十分に時間をかけて説明していきます。ただし、ここでは、左下隅にあるボタンを取り上げます。

プロパティシートの右のボタンは、設定できるすべてのプロパティではなく、現在のドキュメントで設定されているプロパティだけを表示します。

図 7. プロパティシートの右のボタンは、設定できるすべてのプロパティではなく、現在のドキュメントで設定されているプロパティだけを表示します。

この項で使用したスクリーンショットは、右のボタンをクリックして、設定されているプロパティだけを表示したものです。他の 2 つのボタンは設定できるすべてのプロパティを、カテゴリ別にグループ化して表示 (左のボタン) するか、またはアルファベット順に表示 (中央のボタン) します。

次の項では、Dreamweaver 8 で CSS を視覚的に表示する新しい機能をすべて説明します。

ページ 2 / 10
前のページ
次のページ