CSS の操作の概要
更新 : 2007 年 11 月
カスケード スタイル シート (CSS: Cascading Style Sheet) には、Web ページの要素に適用されるスタイル ルールが格納されます。これらのスタイルは、ページでの要素の表示方法と配置を定義します。Visual Studio 2008 には、CSS の操作で使用するためのツールが用意されています。
このトピックの内容は次のとおりです。
シナリオ
CSS ツールの機能
背景
コード例
クラス リファレンス
新機能
シナリオ
Visual Studio 2008 では、デザイナを使用して Web ページを作成および編集する際に、インライン スタイル、Web ページに含まれるスタイル、外部スタイル シートに含まれるスタイルなどのスタイル ルールを記述できます。表示支援機能を利用して、ページ要素に適用される埋め込みおよびマージンを表示できます。また、配置ツールを利用して要素を配置することもできます。
ページのトップへ
CSS ツールの機能
Visual Studio 2008 には、スタイルと CSS を作成、適用、および管理するためのツール セットが用意されています。たとえば、次のようなツールがあります。
[スタイルの適用] ウィンドウで、スタイルを作成、変更、および適用できます。また、外部 CSS へのリンクや外部 CSS の削除もできます。このウィンドウではスタイルの型が識別され、そのスタイルが現在の Web ページおよび現在の選択範囲で使用されているかどうかが表示されます。詳細については、「方法 : [スタイルの適用] ウィンドウおよび [スタイルの管理] ウィンドウを使用する」を参照してください。
[スタイルの管理] ウィンドウには、[スタイルの適用] ウィンドウの機能の多くが備わっています。ただし、[スタイルの管理] ウィンドウを使用すると、内部のスタイル シート (ページの style 要素) から外部のスタイル シートにスタイルを移動することも、その逆もできます。また、スタイル シートの内部でスタイルを移動させることもできます。詳細については、「方法 : [スタイルの適用] ウィンドウおよび [スタイルの管理] ウィンドウを使用する」を参照してください。
[CSS のプロパティ] ウィンドウを使用すると、Web ページの現在の選択範囲で使用されているスタイルを表示できます。また、そのスタイルの優先順位も表示できます。さらに、すべての CSS プロパティの一覧も表示できます。これにより、既存スタイルへのプロパティの追加、設定済みのプロパティの変更、および新しいインライン スタイルの作成ができます。詳細については、「方法 : [CSS のプロパティ] ウィンドウを使用する」を参照してください。
[スタイルの適用] ツール バーを使用すると、クラス ベースまたは ID ベースのスタイルの適用や削除ができます。また、新しいスタイルの作成および適用もできます。Visual Studio によって生成されるスタイルを細かく制御することもできます。詳細については、「方法 : [スタイルの適用] ツール バーを使用する」を参照してください。
タグ セレクタを使用すると、Web ページでの作業中に HTML タグを選択できます。タグ セレクタ バーは、編集ウィンドウの下部にあります。ページ上の任意の場所にカーソルを置くと、クイック タグ セレクタ バーにより、その領域の基になっている HTML を表すタグが表示されます。また、Esc キーを使用して HTML 階層の上位に移動して、他のタグの入れ子であるタグを選択できます。詳細については、「Visual Web Developer の HTML エディタでのタグ ナビゲーション」を参照してください。
ページのトップへ
背景
書式属性をページの各要素に個別に割り当てる代わりに、スタイル ルールを作成できます。これらのルールでは、要素のインスタンスや、特定の ID またはスタイル クラスを持つ要素のインスタンスが Web ブラウザで見つかると、プロパティ値 (通常は書式指定ルール) が適用されます。
CSS スタイルを操作するには、スタイルの作成方法および適用方法を理解しておく必要があります。ここでは、CSS スタイルに関する W3C の CSS の仕様、および CSS スタイルの操作を容易にする Visual Studio 2008 ツールについて説明します。
CSS スタイル ルールの定義
各 CSS スタイル ルール (スタイルとも呼ばれます) には、セレクタ (たとえば、h1 など) および宣言 (たとえば、color:blue など) という 2 つの主要部があります。宣言は、プロパティ (color) とその値 (blue) で構成されます。スタイル ルール指定の構文は、次のとおりです。
Selector { property : value ; property2 : value2}
たとえば、次の CSS スタイル ルールは、h1 要素のテキストをすべて中央揃えにし、フォントの色を青にするように指定します。
h1 {text-align:center; color:blue;}
さまざまな種類のスタイルの使用
任意の要素や、クラスへの割り当てが設定されている要素に適用されるスタイル ルールを定義できます。また、要素に適用されるスタイル ルールを ID で定義することもできます。スタイルはルール セットによって定義されます。ルール セットは、セレクタ、およびそれに続く左中かっこ ( { ) と右中かっこ ( } ) の間に表示されるプロパティ宣言のブロックで構成されます。各スタイルの種類は、セレクタによって他のスタイルの種類と区別されます。クラス ベースのセレクタの前にはピリオド (.) が付きます。ID ベースのセレクタの前にはシャープ記号 (#) が付きます。要素ベースのスタイルのセレクタは、h1 などの HTML 要素の名前のみで構成されます。
要素ベースのスタイル
要素ベースのスタイルでは、特定の HTML 要素のすべてのインスタンスに適用されるプロパティを定義します (要素ベースのスタイルは、クラス ベースのスタイルまたは ID ベースのスタイルで要素の個々のインスタンスをオーバーライドできます)。たとえば、すべての段落 (p 要素のコンテンツ) の周りに 25 ピクセルの余白を作成するとします。これを行うには、セレクタとして p 要素を使用する要素ベースのスタイル、および余白プロパティの宣言を含む要素ベースのスタイルを作成します。この要素ベースのスタイル ルールを次の例に示します。
p { margin-left: 25px; margin-right: 25px }
クラス ベースのスタイル
クラス ベースのスタイルでは、特定の要素型 (たとえば、すべてではなく一部の p 要素) のサブセットに適用されるプロパティを定義します。これらは、一部の p 要素、一部の span 要素などの異なる要素型にも適用できます。この要素ベースのスタイル ルールを次の例に示します。introduction は、スタイルのセレクタ (クラスの名前) です。
.introduction {font-size: small; color: white}
<p> タグに使用するクラスを指定する方法を次の例に示します。
<p class="introduction">
ID ベースのスタイル
ID ベースのスタイルでは、ID 属性で識別される特定の要素に適用されるプロパティを定義します。ID ベースのスタイルは、Web ページ上の単一の HTML 要素にスタイルを設定する際によく使用されます。この ID ベースのスタイル ルールを次の例に示します。footer は、このスタイルが適用される ID を示します。
#footer {background-color: #CCCCCC; margin: 15px}
<p> タグに使用する ID を指定する方法を次の例に示します。
<p id="footer">
CSS スタイルの記述
CSS スタイル ルールは、次を含む複数の場所に記述できます。
HTML マークアップのインライン
Web ページの style 要素
Web ページにリンクまたはインポートされている外部スタイル シート (.css ファイル)
通常は、Web サイト全体に適用されるルールを 1 つの外部スタイル シートに記述します。1 つのページにのみ適用されるスタイル ルールは、そのページの style 要素に記述します。1 つのページ要素に適用されるスタイル ルールは、インライン スタイルとして記述します。多くのデザイナおよび開発者が、すべてのスタイル ルールを 1 つ以上の外部スタイル シートに記述するとスタイルの管理が容易になることに気付いています。
インライン スタイルの作成
インライン スタイル ルールは、スタイル属性を使用して要素の開始タグで定義されます。インライン スタイルは、Web ページ上の単一要素のプロパティを定義する場合で、そのスタイルを再利用しない場合に使用します。
次に、インライン スタイルの例を示します。
<p style="font-weight: bold; font-style: italic; color: #FF0000">
内部 (ページ固有の) CSS スタイルの作成
CSS スタイル ルールは、Web ページの head 要素内の style 要素で定義できます。この場合、スタイル ルールはそのページ内の要素のみに適用されます。
Web ページ上のすべての h1 要素に対する CSS スタイル ルールの定義方法および適用方法の例を次に示します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML 4.0 CSS Element Style Example</title>
<style type="text/css"> h1{text-align:center; color:blue;} </style>
</head>
<body>
<h1>This text is centered and blue</h1>
</body>
</html>
この Web ページでは、<h1> と </h1> タグに囲まれたテキストは中央揃えになり、青で表示されます。ドキュメントで各 h1 要素に対してこれらのスタイル属性を再び割り当てる必要はありません。h1 要素で囲まれたすべてのテキストの色 (またはプロパティ) を変更する場合は、1 つのスタイル ルールを編集するだけで変更できます。
外部カスケード スタイル シートの作成
外部スタイル シートは、スタイル ルールだけが格納された .css 拡張子を持つテキスト ファイルです。次の例のように、link 要素を使用して、Web ページにスタイル シートをリンクさせることができます。
<link rel="stylesheet" type="text/css" href="myStyles.css" />
この link 要素は、myStyles.css 外部スタイル シート内のスタイル ルールを現在のページに適用しています。
外部スタイル シートに一覧表示されるスタイル ルールは、style 要素のスタイル ルールと同じ方法で記述されます。ただし、これらは <style> と </style> タグで囲まれません。単純な .css ファイルの内容全体の例を次に示します。
h1 { text-align:center; color:blue; }
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }
1 つの外部スタイル シートを複数の HTML ページにリンクさせることができます。この場合、Web サイト全体にスタイルが適用されます。スタイル シートにより、書式指定ルールは内容から分離されます。このため、スタイル ルールの管理がより簡単になります。
CSS スタイル ルールの優先順位の理解
CSS スタイル ルールは、優先順位に従うという意味で "連鎖" します。グローバルなスタイル ルールは、まず HTML 要素に適用され、ローカルなスタイル ルールによってオーバーライドされます。たとえば、Web ページ内の style 要素に定義れているスタイルは、外部スタイル シートに定義されているスタイルをオーバーライドします。同様に、ページ上のある HTML 要素内に定義されているインライン スタイルは、他の場所でその同じ要素に対して定義されているスタイルより優先されます。
ローカル CSS スタイル ルールによってオーバーライドされない個々のグローバル スタイル ルールは、ローカル スタイルが適用された後も要素に適用されます。前述の例では、h1 要素内のテキストに適用されるローカル CSS スタイルは、h1 テキストに対する Web ブラウザのグローバル スタイル ルールの一部をオーバーライドしています (h1 テキストを中央揃えにして青で表示します)。ただし、フォントの特性など、すべてのスタイルについては変更していません。グローバル スタイル ルールとローカル スタイル ルールの両方がこの順序で適用されます。その結果、このページ上のすべての h1 テキストは、大きいフォントと太字、および中央揃えの青で表示されます。
コード例
方法 : [スタイルの適用] ウィンドウおよび [スタイルの管理] ウィンドウを使用する
ページのトップへ
クラス リファレンス
CSS ツールに適用されるクラスはありません。
ページのトップへ
新機能
Visual Studio 2008 には、CSS を今までよりも簡単に操作できるいくつかの新しいツールを含む豊富な CSS 編集機能が備わりました。レイアウトのデザインおよびコンテンツのスタイル設定の大半は、[CSS のプロパティ] ウィンドウ、[スタイルの適用] ウィンドウと [スタイルの管理] ウィンドウ、およびスタイルの適用ツールを使用してデザイン ビューで作業できます。配置、埋め込み、およびマージンの変更も、WYSIWYG ビジュアル レイアウト ツールを使用してデザイン ビューで行うことができます。
ページのトップへ