Dreamweaver 8 の CSS 機能について

Dreamweaver のデザインビューの視覚的な表示

この項では、熟練した CSS デベロッパーが泣いて喜ぶような変更点を紹介します。Dreamweaver がレンダリングするスタイルプロパティの向上と共に、スタイルの表示を確認するための新しいツールが用意されています。

CSS 表示用のツール

表示の選択肢の最初のグループでは、複数のメディアタイプをサポートする複数のスタイルシートを持つページを表示または作成できます。[表示]-[スタイルレンダリング] を選択し、別のメディアタイプを選択して、スタイルをデザインまたはテストすることができます。よくわからない場合、複数のメディアタイプを Web サイトに統合する最も簡単な方法は、印刷メディア用の別のスタイルシートを定義することです。Macromedia の Web サイト (macromedia.com/jp) では、印刷メディア用の別のスタイルシートを利用しています。

図 8. 選択可能なメディアタイプを示す [スタイルレンダリング] メニュー

便利だけれども、見過ごしやすいオプションが最後の [表示スタイル] です。このオプションは初期設定で有効になっていますが、このオプションの選択を解除すると、すべての CSS レンダリングが削除されます。これは、アクセシビリティを考慮する必要がある場合の健全性検査として利用できます。たとえば、CSS レンダリングを使用せずにページをレビューすることによって、開発者はスクリーンリーダーで処理する場合のコンテンツの順序を確認できます。

表示の選択肢のもう 1 つのグループは、ドキュメントツールバーから利用できます。ビジュアルエイドボタン (風変わりな目) をクリックすると、次のサブメニューが表示されます。

図 9. ドキュメントツールバーの [ビジュアルエイド] メニュー

これらの選択肢が最も役に立つのは、ボックスプロパティやアウトラインなどのプロパティを定義する場合です。以下の各説明では、まったく同じページのスクリーンショットを示します。各スクリーンショットは、説明されている表示オプションだけを有効にした場合に、ページがどのように表示されるかを示しています。スクリーンショットには、位置、余白、マージンが定義された DIV タグ、P タグを格納するためにのみ使用される DIV タグ、および P タグが含まれています。

• [CSS レイアウトの背景] : この選択肢は、CSS プロパティの影響を受けるすべてのエレメントに背景色を追加します。この設定を有効にすると、テキストエレメントのカラーに影響する場合があるので、必要に応じてこのオプションを有効または無効にすることをお勧めします。

  メモ : レイアウトの背景色が図 10 の背景色と一致しない場合があります。また、この機能を有効または無効にすると背景色は変更されます。Dreamweaver で背景色に割り当てることができるのは最大 16 色です。1 ページに 16 個を超える DIV タグがあり、一部がネストされている場合、重なり合った背景色が同じカラーになることがあります。この機能を無効にして、再び有効にすると、この問題を回避できます。

  

  図 10. ビジュアルエイドの [CSS レイアウトの背景] を有効にして表示されたスタイル

• [CSS レイアウトのボックスモデル] : この選択肢は、選択したボックスエレメントの内側と外側に斜線を追加して、余白とマージンの設定を示します。図 11 のように表示するには、"csstest.htm" サンプルファイルで点線のボーダーを選択する必要があります。また、エレメントを選択すると、エレメント内でマウスポインタを置いた場所に応じてツールヒントが表示されます。次のスクリーンショットでは、選択した DIV タグのアウトラインにマウスポインタを置いています。外側の斜線にマウスポインタを置くと、ツールヒントにはマージンの設定だけが表示されます。内側の斜線にマウスポインタを置くと、ツールヒントには余白の設定だけが表示されます。コンテンツの内側にマウスポインタを置くと、ツールヒントには幅や高さなどの設定が表示されます。

  

  図 11. ビジュアルエイドの [CSS レイアウトのボックスモデル] を有効にして表示されたスタイル

• [CSS レイアウトのアウトライン] : このオプションは、すべての DIV タグにアウトラインを追加します。他に何もない場合は、このオプションは DIV タグを選択するのに便利です。また、DIV タグによって制御されるエレメントを確認するのに便利な方法です。たとえば、次のスクリーンショットでは、ページの最後の段落は DIV タグで囲まれていませんが、その上の段落はタグで囲まれていることが簡単にわかります。

  

  図 12. ビジュアルエイドの [CSS レイアウトのアウトライン] を有効にして表示されたスタイル

• [レイヤーのアウトライン] : このオプションは、ボックスモデルプロパティを使って定義されている DIV タグにのみアウトラインを追加します。つまり、配置のために使用されている DIV タグにアウトラインを追加します。これを次のスクリーンショットに示します。中央の段落は DIV タグに含まれていますが、このタグにはボーダーは設定されていません。上のボックスのハイライト表示されたボーダーは保持されます。

  

  図 13. ビジュアルエイドの [レイヤーのアウトライン] を有効にして表示されたスタイル

エレメントの視覚的な表示の向上

Dreamweaver 8 では、前に示したスクリーンショットのエレメントを含め、CSS エレメントのレンダリングが強化されています。以前は、ボックスエレメントは、どのような種類のボーダーを使って定義されている場合でも、1 本の線を使って表示されていました。Dreamweaver 8 では、スクリーンショットに示されている破線など、すべての種類のボーダーが表示されるようになりました。

最も顕著な機能の向上は、Dreamweaver によるさまざまな配置エレメントのレンダリングであり、特に複雑なページやタグがネストされている場合のレンダリングが向上しました。向上したレンダリング機能の例をいくつか示します。

• ボーダースタイル
• 配置プロパティ、特にネストされたエレメント
• オーバーフロープロパティのサポート
• 最初の行および最初の文字の疑似エレメント
• 区切り線上の CSS プロパティのレンダリングのサポート

ページ 3 / 10

前のページ

次のページ