CSS ルール、セレクター、継承など、CSS の基本的な概念について説明します。 また、Dreamweaver で CSS を Web ページと関連付ける方法を説明します。
カスケーディングスタイルシートについて
Cascading Style Sheets (CSS) は、Web ページ内のコンテンツの外観をコントロールする書式設定ルールのコレクションです。CSS スタイルを使用してページを書式設定することで、コンテンツとプレゼンテーションを分離できます。ページのコンテンツ（HTML コード）は HTML ファイルに、コードのプレゼンテーションを定義する CSS ルールは別のファイル（外部スタイルシート）または HTML ドキュメントの別の部分（通常は head セクション）に配置されます。コンテンツとプレゼンテーションを分離することで、変更を加える際にすべてのページのすべてのプロパティを更新する必要がないため、中央の場所からサイトの外観を保守することがはるかに簡単になります。コンテンツとプレゼンテーションを分離すると、よりシンプルで整理された HTML コードになり、ブラウザーの読み込み時間が短縮され、アクセシビリティに問題のある人（スクリーンリーダーを使用している人など）のナビゲーションが簡単になります。
CSSを使用すると、ページの外観を柔軟に細かくコントロールできます。CSS を使用して、特定のフォントやフォントサイズ、太字、斜体、下線、テキストシャドウ、テキスト色と背景色、リンク色とリンクの下線など、多くのテキストプロパティを制御できます。CSS を使用してフォントを制御することで、複数のブラウザーでページレイアウトと外観のより一貫した処理を確保することもできます。
テキストの書式設定に加えて、CSS を使用して web ページ内のブロックレベル要素の書式と配置を制御できます。ブロックレベル要素は、通常 HTML で改行によって分離される独立したコンテンツで、視覚的にはブロックとして書式設定されます。たとえば、h1 タグ、p タグ、div タグはすべて web ページでブロックレベル要素を生成します。ブロックレベル要素にマージンとボーダーを設定し、特定の場所に配置し、背景色を追加し、その周りにテキストを浮動させることなどができます。ブロックレベル要素の操作は、本質的に CSS でページをレイアウトする方法です。
CSS ルールについて
CSS の書式設定ルールは、セレクターと宣言（またはほとんどの場合、宣言ブロック）の 2 つの部分で構成されます。セレクターは書式設定された要素を識別する用語（p、h1、クラス名、または id など）で、宣言ブロックはスタイルプロパティが何であるかを定義します。次の例では、h1 がセレクターで、中括弧（{}）の間にあるすべてが宣言ブロックです。
h1 {
font-size: 16 ピクセル；
font-family: Helvetica；
font-weight:bold；
}
個別の宣言は、プロパティ（font-family など）と値（Helvetica など）の 2 つの部分で構成されます。前の CSS ルールでは、h1 タグ用の特定のスタイルが作成されました。このスタイルにリンクされたすべての h1 タグのテキストは、16 ピクセルのサイズ、Helvetica フォント、太字になります。
スタイル（ルールまたはルールの集合から生成される）は、書式設定する実際のテキストとは別の場所（通常は外部スタイルシートまたは HTML ドキュメントの head 部分）にあります。したがって、h1 タグ用の 1 つのルールを多くのタグに一度に適用でき（外部スタイルシートの場合、ルールを多くの異なるページの多くのタグに一度に適用できます）。このようにして、CSS は非常に簡単な更新機能を提供します。1 つの場所で CSS ルールを更新すると、定義されたスタイルを使用するすべての要素の書式が自動的に新しいスタイルに更新されます。
Dreamweaverでは、以下のタイプのスタイルを定義できます。
クラススタイルを使用すると、ページ上の任意の要素にスタイルプロパティを適用できます。
HTMLタグスタイルは、h1などの特定のタグの書式設定を再定義します。h1 タグの CSS スタイルを作成または変更すると、h1 タグで書式設定されたすべてのテキストが即座に更新されます。
詳細スタイルは、特定の要素の組み合わせ、または CSS で許可されているその他のセレクター形式の書式を再定義します（例えば、セレクター td h2 は、h2 ヘッダーがテーブルセル内に表示される場合に適用されます）。詳細スタイルでは、特定の id 属性を含むタグの書式を再定義することもできます（例えば、#myStyle で定義されたスタイルは、属性と値のペア id="myStyle" を含むすべてのタグに適用されます）。
CSS ルールは次の場所に置くことができます。
外部 CSS スタイルシート
別の外部 CSS（.css）ファイル（HTML ファイルではない）に保存された CSS ルールのコレクションです。このファイルは、ドキュメントの head セクションにあるリンクまたは @import ルールを使用して、web サイト内の 1 つ以上のページにリンクされます。
内部（または、埋め込み）CSS スタイルシート
HTML ドキュメントの head 部分の style タグに含まれる CSS ルールのコレクションです。
インラインスタイル
HTML ドキュメント内の特定のタグインスタンス内で定義されます （インラインスタイルの使用はお勧めしません）。
Dreamweaver では、CSS スタイルガイドラインに準拠している限り、既存のドキュメントで定義されたスタイルが認識されます。また、Dreamweaver では、適用されたスタイルのほとんどがデザインビューで直接レンダリングされます。（ただし、ブラウザーウィンドウでドキュメントをプレビューすると、ページの最も正確な「ライブ」レンダリングが得られます。）一部の CSS スタイルは、Microsoft Internet Explorer、Netscape、Opera、Apple Safari、またはその他のブラウザーで異なってレンダリングされ、一部は現在どのブラウザーでもサポートされていません。
カスケーディングスタイルについて
カスケーディングという用語は、ブラウザーが web ページ上の特定の要素のスタイルを最終的に表示する方法を指します。web ページに表示されるスタイルには、3 つの異なるソースが関与しています。ページの作成者が作成したスタイルシート、ユーザーのカスタマイズされたスタイル選択（存在する場合）、およびブラウザー自体のデフォルトスタイルです。前のトピックでは、web ページとそのページに添付されたスタイルシートの両方の作成者として、web ページのスタイルを作成する方法について説明しました。しかし、ブラウザーには web ページのレンダリングを決定する独自のデフォルトスタイルシートもあり、さらに、ユーザーは web ページの表示を調整する選択を行ってブラウザーをカスタマイズできます。web ページの最終的な外観は、これら 3 つのソースすべてのルールが組み合わされて（または「カスケード」されて）、web ページを最適な方法でレンダリングした結果です。
一般的なタグである段落タグ、つまり <p> タグがこの概念を説明しています。ブラウザーはデフォルトで、段落テキスト（HTML コード内の <p> タグ間のテキスト）のフォントとフォントサイズを定義するスタイルシートを備えています。例えば、Internet Explorerでは、段落テキストを含むすべての本文が、デフォルトでTimes New Roman、Mediumフォントで表示されます。
しかし、Web ページの作成者として、段落フォントとフォントサイズに関するブラウザーのデフォルトスタイルを上書きするスタイルシートを作成することができます。例えば、スタイルシートに次のルールを作成できます：
p {
font-family: Arial;
font-size: small;
}
ユーザーがページを読み込むと、作成者によって設定された段落フォントとフォントサイズ設定が、ブラウザーのデフォルトの段落テキスト設定を上書きします。
ユーザーは選択を行って、自分の用途に 最適な方法でブラウザー表示をカスタマイズできます。例えばInternet Explorerでは、ユーザーは表示 > 文字のサイズ > 最大を選択してページフォントをより読みやすいサイズに拡大できます（フォントが小さすぎると思う場合）。最終的に（少なくともこの場合）、ユーザーの選択は、段落のフォントサイズに対するブラウザーのデフォルトスタイルと、webページの作成者が作成した段落スタイルの両方を上書きします。
カスケードのもう一つの重要な要素に、継承があります。 web ページのほとんどの要素の プロパティは継承されます。例えば、段落 タグは本文タグから特定のプロパティを継承し、spanタグは 段落タグから特定のプロパティを継承するなどです。したがって、 スタイルシートで次のルールを作成した場合：
body {
font-family: Arial;
font-style: italic;
}
この場合、段落タグが body タグからこれらのプロパティを継承するため、Web ページのすべての段落テキスト（および、段落タグのプロパティを継承するテキスト）は Arial のイタリックになります。 ただし、ルールをより具体的に設定して、継承による標準形式を上書きするスタイルを作成することもできます。 例えば、スタイルシートに以下のルールを作成したとします。
body {
font-family: Arial;
フォント-style: 斜体;
}
p {
font-family: Courier;
font-style: normal;
}
全ての本文はArialと斜体except段落 （とその継承）テキストになり、Courier標準（非斜体）として表示されます。 技術的には、段落タグは最初に本文タグに設定されたプロパティを継承しますが、独自に定義されたプロパティがあるため、それらのプロパティを無視します。つまり、ページ要素は一般的に上位からプロパティを継承しますが、タグに直接プロパティを適用すると、常に継承の標準ルールを上書きします。
上記で説明した全ての要因の組み合わせに加えて、CSS特異性（特定の 種類のCSSルールに異なる重み付けを与えるシステム）やCSSルールの順序などの他の 要因が、最終的に 高い優先度のアイテムが低い優先度の プロパティを上書きする複雑なカスケードを作成します。カスケード、継承、特異性を管理するルールの詳細については、www.w3.org/TR/CSS2/cascade.htmlを参照してください。
テキストのフォーマットと CSS について
Dreamweaver の初期設定では、テキストのフォーマットには CSS が使用されます。 プロパティインスペクターやメニューコマンドを使用してテキストにスタイルを適用すると、CSS ルールが作成され、現在のドキュメントのヘッドに埋め込まれます。
CSS デザイナーを使用すると、CSS ルールとプロパティを作成および編集できます。 プロパティインスペクターよりも格段に強固なエディターである CSS デザイナーでは、ルールがドキュメントの先頭に埋め込まれているか、外部スタイルシートにあるかとは無関係に、現在のドキュメントで定義されているすべての CSS ルールが表示されます。 Adobe では、CSS の作成と編集のプライマリツールとして、プロパティインスペクターの代わりに CSS デザイナーを使用することをお勧めします。 それにより、コードが簡潔で維持しやすくなります。
CSS Designerの詳細については、CSS Designerを使用したページレイアウトを参照してください。
独自に作成するスタイルやスタイルシートの他にも、Dreamweaver に付属するスタイルシートを使用して、ドキュメントにスタイルを適用することもできます。
CSSでテキストを書式設定するチュートリアルについては、www.adobe.com/go/vid0153を参照してください。
ショートハンド CSS プロパティについて
CSS仕様では、ショートハンド CSSとして知られる省略記法を使用した スタイルの作成が可能です。ショートハンドCSSでは、単一の宣言を使用して 複数のプロパティの値を指定できます。例えば、fontプロパティでは font-style、font-variant、font-weight、font-size、line-height、 そしてfont-familyプロパティを1行で設定できます。
CSS の短縮記法を使用する際の重要な注意点は、CSS 短縮記法プロパティから省略された値は、デフォルト値が割り当てられることです。これにより、同じタグに2つ以上のCSSルールが割り当てられている場合、ページが正しく表示されないことがあります。
たとえば、以下に示すh1ルールでは、CSSの個別指定プロパティ構文を使用しています。font-variant、font-stretch、font-size-adjust、およびfont-styleプロパティにはデフォルト値が割り当てられていることに注意してください。
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
単一の短縮記法プロパティとして書き直すと、同じルールは次のように表示される場合があります：
h1 { font: bold 16pt/18pt Arial }
短縮記法を使用して記述する場合、省略された値には自動的にデフォルト値が割り当てられます。したがって、前述の短縮記法の例では、font-variant、font-style、font-stretch、font-size-adjust タグが省略されています。
複数の場所でスタイルが定義されている場合（例えば、HTMLページに埋め込まれていると同時に外部スタイルシートからインポートされている場合）、CSS構文の短縮記法と完全記法の両方を使用していると、短縮記法ルールで省略されたプロパティが、別のルールで明示的に設定されたプロパティを上書き（またはカスケード）する可能性があることに注意してください。
このため、Dreamweaver ではデフォルトで CSS 記法の完全記法を使用します。これにより、短縮記法ルールが完全記法ルールを上書きすることによる問題を防ぐことができます。短縮記法 CSS 記法でコーディングされた web ページを Dreamweaver で開く場合、Dreamweaver は完全記法を使用して新しい CSS ルールを作成することに注意してください。Dreamweaver が CSS ルールを作成および編集する方法を指定するには、環境設定ダイアログボックスの CSS スタイルカテゴリ（Windows では編集／環境設定、Macintosh では Dreamweaver／環境設定）で CSS 編集の環境設定を変更します。
Dreamweaver と CSS
Dreamweaver では、複数の方法で CSS を操作できます：
- CSS デザイナーを使用して、最小限のコーディングで CSS を構築できます。 詳しくは、CSS デザイナーを使用したページのレイアウトを参照してください。
- CSS を手作業でコーディングすることもできます。 Dreamweaver が提供するコーディング機能の詳細については、Dreamweaver のコーディング環境を参照してください。
- Sass、Scss、Less ファイルを使用する場合は、好みのシンタックスを使用してファイルをコーディングし、それを Dreamweaver で使用できます。 詳細については、CSS プリプロセッサを参照してください。
