カスケーディングスタイルシートについて

CSS (Cascading Style Sheet : カスケーディングスタイルシート) は、Web ページでのコンテンツの外観を制御するフォーマットルールの集合です。ページの書式を設定するために CSS を使用する場合は、コンテンツとプレゼンテーションを切り離してください。ページのコンテンツ (HTML コード) は HTML ファイル自体に格納され、コードのプレゼンテーションを定義する CSS ルールは他のファイル (外部スタイルシート) または HTML ドキュメントの他の部分 (通常は head セクション) に格納されます。CSS を使用すると、レイアウトの厳密な位置設定から特定のフォントやスタイルにいたるまで、ページの外観を正確かつ柔軟に制御できます。

CSS を利用すると、HTML だけでは制御できない多くのプロパティを制御できます。たとえば、選択したテキストに異なるフォントサイズやフォント単位 (ピクセル、ポイントなど) を指定することができます。CSS を使用してフォントサイズをピクセル単位で設定すると、ページのレイアウトや外観をどのブラウザでも同じように処理することができます。

テキストのフォーマットの他に、CSS を使用して Web ページ内のブロックレベルのエレメントのフォーマットや位置も制御できます。たとえば、ブロックレベルのエレメントのマージンとボーダーや、他のテキストを囲むフロートテキストなどを設定できます。

CSS フォーマットルールは、セレクタと宣言の 2 つの部分から構成されます。セレクタとは書式が設定されたエレメントを識別するもの (P、H1、クラス名、ID など) を示し、宣言は、スタイルエレメントが何であるかを定義します。次の例では、H1 はセレクタであり、波カッコ ({}) 内のすべてのコードは宣言です。

H1 {
font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;

}

宣言は、プロパティ (font-family など) と値 (Helvetica など) の 2 つの部分で構成されます。上記の CSS ルールでは、H1 タグに対して特定のスタイルが作成されています。このスタイルにリンクされた H1 タグのすべてのテキストは、サイズが 16 ピクセル、Helvetica フォント、および太字になります。

"カスケーディング" とは、複数のスタイルを同じエレメントに適用できることを表します。たとえば、カラーを適用する CSS ルールと、マージンを適用する CSS ルールをそれぞれ別に作成し、その両方をページ上の同じテキストに適用できます。定義されたスタイルは、Web ページのエレメントにカスケードされ、目的のデザインが作成されます。

CSS の大きな特長は、更新が簡単なことです。CSS を 1 つの場所で更新すると、定義されたそのスタイルを使用しているすべてのドキュメントのフォーマットが自動的に新しいスタイルに更新されます。

Dreamweaver では、以下のタイプのスタイルを定義できます。

カスタム CSS ルール (クラススタイルとも呼ばれます) を使用すると、任意の範囲またはテキストブロックにスタイル属性を適用できます (詳細については、クラススタイルの適用を参照してください)。
HTML タグスタイルは、h1 のような特定のタグのフォーマットを再定義します。h1 タグの CSS スタイルを作成または変更すると、h1 タグでフォーマットされたテキストは瞬時にすべて変更されます。
CSS セレクタスタイル (高度なスタイル) は、特定のエレメントの組み合わせのフォーマット、または CSS で許可されている他のセレクタフォームのフォーマットを再定義します (たとえば、セレクタ td h2 はテーブルセル内に h2 ヘッダーがある場合は常に適用されます)。また、高度なスタイルを使用して、特定の id 属性を含むタグのフォーマットを再定義することもできます (たとえば、#myStyle で定義されたスタイルを id="myStyle" という属性と値のペアを含むすべてのタグに適用します)。

CSS ルールは次の場所に置くことができます。

外部 CSS スタイル シートは、外部の CSS (.css) ファイル (HTML ファイルではありません) に保存されている CSS ルールの集まりです。このファイルは、ドキュメントの head セクションのリンクを使用して、Web サイト内のページにリンクされます。複数のページにリンクすることも可能です。

内部 (または埋め込み) CSS スタイルシートは、HTML ドキュメントの head セクション内の style タグに記述される CSS ルールの集まりです。

インラインスタイルは、HTML ドキュメント内の特定のタグインスタンス内で定義されます。

既存のドキュメントで定義されているスタイルが CSS スタイルガイドラインに準拠していれば、Dreamweaver はそのスタイルを認識します。

ヒント

O'Reilly CSS リファレンスガイドを Dreamweaver で表示するには、[ヘルプ]-[リファレンス] を選択し、[リファレンス] パネルのポップアップメニューから [O'REILLY CSS Reference] を選択します。

カスタム HTML フォーマットは、CSS によって適用されるフォーマットより優先されることがあります。CSS ルールで段落のフォーマットを制御するには、すべてのカスタム HTML フォーマットを削除します。

Dreamweaver では、ドキュメントウィンドウに直接適用されるほとんどのスタイル属性がレンダリングされます。また、ブラウザのウィンドウでドキュメントをプレビューして、適用を確認することもできます。CSS スタイル属性の中には、Microsoft Internet Explorer、Netscape、Opera、および Apple Safari で表示が異なるものや、現在はどのブラウザでもサポートされていないものがあります。