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

CSS（Cascading Style Sheet：カスケーディングスタイルシート） は、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 はセレクターであり、山カッコ（{}）内のすべてのコードは宣言のブロックです。

個々の宣言は、プロパティ（font-family など）と値（Helvetica など）の 2 つの部分で構成されます。上記の CSS ルールでは、h1 タグに対して特定のスタイルが作成されています。このスタイルにリンクされたすべての h1 タグのテキストは、サイズが 16 ピクセル、フォントが Helvetica で、ボールドです。

ルールまたはルールの集まりから取得されたスタイルは、通常は外部スタイルシート、または HTML ドキュメントの head セクションなど、実際のテキストのフォーマットとは別の場所に保存されます。したがって、h1 タグのルールを多くのタグに一度に適用することができます（また、外部スタイルシートでは、多くの異なるページの多くのタグに一度に適用することができます）。このようにして、CSS は非常に簡単な更新機能を提供します。ある場所のルールを更新すると、定義済みのスタイルを使用するすべてのエレメントのフォーマットが新しいスタイルに自動的に更新されます。

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

• クラススタイルを使用して、ページ上の任意のエレメントまたは複数のエレメントにスタイルプロパティを適用することができます。

• HTML タグスタイルは、h1 のような特定のタグのフォーマットを再定義します。h1 タグの CSS スタイルを作成または変更すると、h1 タグでフォーマットされたテキストは瞬時にすべて変更されます。

• 高度なスタイルはエレメントの特定の組み合わせ、または CSS で可能な他のセレクターフォームのフォーマットを再定義します。例えば、セレクター td h2 は、テーブルセル内に h2 ヘッダーがある場合に常に適用されます。高度なスタイルで、特定の id 属性を含むタグのフォーマットを再定義することもできます。例えば、#myStyle で定義されるスタイルは、id="myStyle" という属性と値のペアを含むすべてのタグに適用されます。

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

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

HTML ドキュメントの head 部分の style タグに記述される CSS ルールの集まりです。

HTML ドキュメント内の特定のタグインスタンス内で定義されます （インラインスタイルの使用はお勧めしません）。

既存のドキュメントで定義されているスタイルが CSS スタイルガイドラインに準拠していれば、Dreamweaver はそのスタイルを認識します。また、Dreamweaver は、適用されるほとんどのスタイルを直接デザインビューに表示します（ただし、ページを最も正確かつ "鮮明に" レンダリングする方法は、ブラウザーウィンドウによるドキュメントのプレビューです）。CSS スタイルの中には、Microsoft Internet Explorer、Netscape、Opera、Apple Safari、または他のブラウザーで表示が異なるものや、現在はどのブラウザーでもサポートされていないものがあります。

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

カスケーディングという用語は、ブラウザーが Web ページの特定のエレメントのスタイルを最終的に表示する方法を指すものです。Web ページで表示されるスタイルは、3 つの異なるソースによって決まります。ページの作成者が作成したスタイルシート、ユーザーがカスタマイズしたスタイルの選択（ある場合）、ブラウザー自体の初期設定のスタイルです。前のトピックでは、Web ページとそのページに関連付けられたスタイルシートの両方の作成者として、Web ページのスタイルを作成する方法について説明しています。ただし、ブラウザーにも Web ページの表示方法を指定するデフォルトのスタイルシートが用意されており、ユーザーはそれらのスタイルを選択して Web ページの表示を調整することで、ブラウザーをカスタマイズすることもできます。Web ページの最終的な外観は、最適な方法で Web ページを表示できるように、これらの 3 つのソースのルールをすべて組み合わせた（カスケーディング）結果です。

共通タグである段落タグや <p> タグは、この概念を示すものです。初期設定では、ブラウザーには段落テキスト（つまり、HTML コード内の <p> タグの間に挿入されるテキスト）のフォントおよびフォントサイズを定義するスタイルシートが用意されています。例えば Internet Explorer では、段落テキストを含むすべての本文テキストは、初期設定で Times New Roman（Medium）フォントで表示されます。

ただし、Web ページの作成者であるユーザーは、スタイルシートを作成して、ブラウザーの段落フォントおよびフォントサイズの初期設定を上書きすることができます。例えば、スタイルシートで以下のルールを作成できます。

ユーザーがページを読み込むと、作成者であるユーザーが設定した段落フォントおよびフォントサイズ設定によって、ブラウザーの初期設定の段落テキスト設定が上書されます。

ユーザーはスタイルを選択して、用途に合わせた最適なブラウザー表示をカスタマイズできます。例えば、Internet Explorer でフォントが小さすぎると感じた場合、表示／文字のサイズ／最大を選択して、ページのフォントを読みやすいサイズに拡大することができます。最終的には（少なくともこの場合には）、ユーザーの選択により、初期設定のブラウザーの段落フォントおよびフォントサイズと、Web ページの作成者によって作成された段落スタイルの両方が上書きされます。

カスケードのもう一つの重要な要素に、継承があります。Web ページのほとんどのエレメントのプロパティが継承されます。段落タグは body タグから特定のプロパティを継承し、span タグは段落タグから特定のプロパティを継承します。例えば、スタイルシートに以下のルールを作成したとします。

この場合、段落タグが body タグからこれらのプロパティを継承するため、Web ページのすべての段落テキスト（および、段落タグのプロパティを継承するテキスト）は Arial のイタリックになります。ただし、ルールをより具体的に設定して、継承による標準形式を上書きするスタイルを作成することもできます。例えば、スタイルシートに以下のルールを作成したとします。

この場合、すべての本文テキストは、Courier 標準（非イタリック）で表示される段落（および、それによって継承される）テキストを除いて Arial の イタリックになります。 技術的に説明すると、段落タグは最初に body タグに設定されたプロパティを継承しますが、段落タグには独自に定義されたプロパティがあるため、継承したプロパティは無視されます。つまり、通常ページエレメントは前に記述されたプロパティを継承しますが、プロパティをタグに直接適用することにより、継承による標準形式が常に上書きされます。

上記のすべての要素の組み合わせと、CSS 仕様（特定の種類の CSS ルールに異なるウエイトを与えるシステム）などのその他の要素と CSS ルールの順序により、最終的に高い優先順位を持つ項目が低い優先順位のプロパティを上書きする複雑なカスケードが作成されます。カスケード、継承、仕様を規定するルールについて詳しくは、www.w3.org/TR/CSS2/cascade.html を参照してください。

テキストのフォーマットと CSS について

Dreamweaver の初期設定では、テキストのフォーマットには CSS が使用されます。プロパティインスペクターやメニューコマンドを使用してテキストにスタイルを適用すると、CSS ルールが作成され、現在のドキュメントのヘッドに埋め込まれます。

CSS デザイナーを使用すると、CSS ルールとプロパティを作成および編集できます。プロパティインスペクターよりも格段に強固なエディターである CSS デザイナーでは、ルールがドキュメントの先頭に埋め込まれているか、外部スタイルシートにあるかとは無関係に、現在のドキュメントで定義されているすべての CSS ルールが表示されます。Adobe では、CSS の作成と編集のプライマリツールとして、プロパティインスペクターの代わりに CSS デザイナーを使用することをお勧めします。それにより、コードが簡潔で維持しやすくなります。

CSS デザイナーについて詳しくは、CSS デザイナーを使用したページのレイアウトを参照してください。

独自に作成するスタイルやスタイルシートの他にも、Dreamweaver に付属するスタイルシートを使用して、ドキュメントにスタイルを適用することもできます。

CSS を使用してテキストをフォーマットする方法のチュートリアルについては、www.adobe.com/go/vid0153_jp を参照してください。

ショートハンド CSS プロパティについて

CSS の仕様では、ショートハンド CSS と呼ばれる簡略シンタックスを使用してスタイルを作成することができます。ショートハンド CSS では、1 つの宣言を使用して複数のプロパティ値を指定できます。例えば、font プロパティを使用して、font-style、font-variant、font-weight、font-size、line-height、font-family の各プロパティを 1 行で設定できます。

ショートハンド CSS を使用する際に重要なのは、ショートハンド CSS プロパティで省略された値には初期設定値が割り当てられるという点です。したがって、同じタグに複数の CSS ルールが割り当てられている場合には、ページが正しく表示されないこともあります。

例えば、次の h1 ルールでは、長い形式の CSS シンタックスを使用しています。font-variant、font-stretch、font-size-adjust、および font-style の各プロパティは、初期設定値が割り当てられています。

ショートハンドプロパティで書き換えると、同じタグは次のようになることがあります。

ショートハンド表記を使用して記述した場合、省略した値には自動的に初期設定値が割り当てられます。上の例のショートハンドでは、font-variant、font-style、font-stretch、font-size-adjust の各タグが省略されています。

長短の CSS シンタックス形式を使用して複数の場所でスタイルを定義した場合（例えば、HTML ページに埋め込んだスタイルと外部スタイルシートから読み込むスタイル）、ショートハンドルールで省略したプロパティが別のルールで明示的に指定したプロパティより優先される（カスケードされる）ことがあります。

こういった理由から、Dreamweaver では初期設定で長い形式の CSS 表記を使用しています。これにより、ショートハンドルールが長い形式のルールよりも優先されることによって生じる問題が回避されます。Dreamweaver で、ショートハンド CSS 表記を使用して記述した Web ページを開いても、Dreamweaver で作成する CSS ルールは長い形式になります。Dreamweaver で CSS ルールを作成および編集する方法を指定するには、編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択して環境設定ダイアログボックスを表示し、「CSS スタイル」カテゴリで CSS 編集環境設定を変更します。

Dreamweaver と CSS

Dreamweaver では、様々な方法で CSS を操作できます。

• CSS デザイナーを使用して、最小限のコーディングで CSS を構築できます。詳しくは、CSS デザイナーを使用したページのレイアウトを参照してください。
• CSS を手作業でコーディングすることもできます。Dreamweaver のコーディング機能について詳しくは、Dreamweaver のコーディング環境を参照してください。
• Sass、Scss、Less ファイルを使用する場合は、好みのシンタックスを使用してファイルをコーディングし、それを Dreamweaver で使用できます。詳しくは、CSS プリプロセッサーを参照してください。