カスケード スタイル シートについて
カスケード スタイル シート (CSS) は、Web ページ コンテンツの外観を制御する一連の書式設定ルールです。 CSS を使用してページをフォーマットする場合は、コンテンツとプレゼンテーションを分離します。ページのコンテンツ (つまり、HTML コード) は HTML ファイル自体に存在しますが、コードの表現を定義する CSS ルールは別のファイル (外部スタイル シート) または HTML ドキュメントの別の部分 (通常はファイルヘッダー）。 CSS を使用すると、正確なレイアウトの位置から特定のフォントやスタイルに至るまで、ページの正確な外観を非常に柔軟に制御できます。
CSS を使用すると、HTML だけでは制御できない多くのプロパティを制御できます。たとえば、選択したテキストにさまざまなフォント サイズや単位 (ピクセル、ポイント サイズなど) を指定できます。 CSS を使用してフォント サイズをピクセル単位で設定することにより、複数のブラウザ間でページのレイアウトと外観に対するより一貫したアプローチを確保することもできます。
テキストの書式設定に加えて、CSS を使用して、Web ページ内のブロックレベル要素の書式設定と位置を制御できます。たとえば、ブロックレベルの要素に余白や境界線を設定したり、他のテキストの周囲にテキストをフローティングしたりすることができます。
CSS 書式設定ルールは、セレクターと宣言の 2 つの部分で構成されます。セレクターは、フォーマット要素 (P、H1、クラス名、ID など) を識別する用語であり、宣言は要素のスタイルを定義するために使用されます。次の例では、H1 がセレクターであり、括弧 ({}) で囲まれたものはすべて宣言です。
H1 {
フォントサイズ:16ピクセル;
フォントファミリー:Helvetica;
フォントの太さ:太字
;
宣言は、プロパティ (font-family など) と値 (Helvetica など) の 2 つの部分で構成されます。上記の CSS ルールは、H1 タグの特定のスタイルを作成します。このスタイルにリンクされているすべての H1 タグのテキストは、サイズが 16 ピクセル、Helvetica フォント、太字になります。
カスケードという用語は、複数のスタイルを同じ要素に適用できる機能を指します。たとえば、色を適用する CSS ルールと余白を適用する別の CSS ルールを作成し、両方をページ上の同じテキストに適用することができます。定義されたスタイルは Web ページ上の要素にまで「カスケード」され、最終的に希望のデザインを作成します。
CSS の主な利点は、便利な更新機能を提供することです。CSS ルールを 1 か所で更新すると、その定義されたスタイルを使用するすべてのドキュメントの書式設定が新しいスタイルに自動的に更新されます。
Dreamweaver では、次のスタイル タイプを定義できます。
カスタム CSS ルール (クラス スタイルとも呼ばれます) を使用すると、テキストの任意の範囲またはブロックにスタイル プロパティを適用できます。 (クラス スタイルの適用を参照してください。)
HTML タグ スタイルは、特定のタグ (h1 など) の書式設定を再定義します。 h1 タグの CSS スタイルを作成または変更すると、h1 タグで書式設定されたすべてのテキストがすぐに更新されます。
CSS セレクター スタイル (高度なスタイル) は、要素の特定の組み合わせ、または CSS が許可する他のセレクター フォームの書式設定を再定義します (たとえば、テーブル セル内に h2 ヘッダーが表示される場合は常にセレクター td h2 を適用します)。高度なスタイルでは、特定の id 属性を含むタグの書式設定を再定義することもできます (たとえば、#myStyle で定義されたスタイルは、属性値のペア id="myStyle" を含むすべてのタグに適用できます)。
CSS ルールは次の場所にあります。
外部 CSS スタイル シートは、別の外部 CSS (.css) ファイル (HTML ファイルではありません) に保存されている一連の CSS ルールです。ドキュメントは、ドキュメント ファイルのヘッダー部分のリンクを使用して、Web サイト内の 1 つ以上のページにリンクされています。
内部 (または埋め込み) CSS スタイル シートは、HTML ドキュメントのヘッダーのスタイル タグ内に含まれる一連の CSS ルールです。
インライン スタイルは、HTML ドキュメント全体のタグの特定のインスタンス内で定義されます。
Dreamweaver は、CSS スタイル ガイドラインに準拠している限り、既存のドキュメントで定義されたスタイルを認識します。
ヒント
Dreamweaver に含まれている O'Reilly CSS リファレンス ガイドを表示するには、[ヘルプ] > [リファレンス] を選択し、[リファレンス] パネルのポップアップ メニューから [O'Reilly CSS リファレンス] を選択します。
手動で設定した HTML 書式設定は、CSS を通じて適用された書式設定をオーバーライドします。 CSS ルールで段落書式を制御するには、手動で設定されたすべての HTML 書式を削除する必要があります。
Dreamweaver は、ドキュメントウィンドウに直接適用するほとんどのスタイルプロパティをレンダリングします。ブラウザ ウィンドウでドキュメントをプレビューして、スタイルがどのように適用されるかを確認することもできます。一部の CSS スタイル プロパティは、Microsoft Internet Explorer、Netscape Navigator、Opera、および Apple Safari では表示が異なり、現在どのブラウザでもサポートされていないものもあります。