Share via

CSS の操作の概要

  • [アーティクル]

カスケード スタイル シート (CSS: Cascading Style Sheet) には、Web ページの要素に適用されるスタイル ルールが格納されます。 これらのスタイルは、ページでの要素の表示方法と配置を定義します。 Visual Studio には、CSS を操作するために使用できるツールが用意されています。

このトピックでは、以下について説明します。

  • シナリオ

  • CSS ツールの機能

  • 背景

  • コード例

  • クラス リファレンス

  • ヒント

シナリオ

Web ページを編集するときは、インライン、Web ページの <style> セクション内、または外部のスタイル シート内という 3 つの場所でスタイルのルールを作成できます。 表示支援機能を利用して、ページ要素に適用される埋め込みおよびマージンを表示できます。 また、配置ツールを利用して要素を配置することもできます。

トップに戻る

CSS ツールの機能

Visual Studio には、スタイルとカスケード スタイル シート (CSS) を作成、適用、および管理するための次のツールが用意されています。

  • [スタイルの適用] ウィンドウで、スタイルを作成、変更、および適用できます。 また、外部 CSS へのリンクや外部 CSS の削除もできます。 このウィンドウではスタイルの型が識別され、そのスタイルが現在の Web ページおよび現在の選択範囲で使用されているかどうかが表示されます。

  • [スタイルの管理] ウィンドウには、[スタイルの適用] ウィンドウの機能の多くが備わっています。 ただし、[スタイルの管理] ウィンドウを使用すると、ページの <style> セクションから外部のスタイル シートにスタイルを移動することも、その逆もできます。 また、スタイル シートの内部でスタイルを移動させることもできます。

  • [CSS のプロパティ] ウィンドウを使用すると、Web ページの現在の選択範囲で使用されているスタイルを表示できます。 また、そのスタイルの優先順位も表示できます。 さらに、すべての CSS プロパティの一覧も表示できます。 既存スタイルへのプロパティの追加、設定済みのプロパティの変更、および新しいインライン スタイルの作成ができます。 詳細については、「方法 : [CSS のプロパティ] ウィンドウを使用する」を参照してください。

  • ASP.NET Web フォーム ページ (.aspx ファイル) を使用している場合、タグ セレクターによって、Web ページで作業している間 HTML タグを選択できます。 タグ セレクター バーは、編集ウィンドウの下部にあります。 ページ上の任意の場所にカーソルを置くと、クイック タグ セレクター バーにより、その領域の基になっている HTML を表すタグが表示されます。 また、Esc キーを使用して HTML 階層の上位に移動して、他のタグの入れ子であるタグを選択できます。

トップに戻る

背景

ページ内の特定の型の各要素に書式設定属性を割り当てる必要はありません。 代わりに、その型のすべての要素に適用するスタイルのルールを作成できます。 これらのルールでは、要素のインスタンスや、特定の ID またはスタイル クラスを持つ要素にプロパティ値 (書式指定ルールなど) が適用されます。

このセクションでは、CSS スタイルについて、および Visual Studio を使用して SCC スタイルを作成して適用する方法について学習します。

Bb398931.collapse_all(ja-jp,VS.110).gifCSS スタイル ルールの定義

各 CSS スタイル ルール (スタイルとも呼ばれます) には、セレクター (たとえば、h1 など) および宣言 (たとえば、color:blue など) という 2 つの主要部があります。 宣言は、プロパティ (color) とその値 (blue) で構成されます。 スタイル ルール指定の構文は、次のとおりです。

Selector { property : value ; property2 : value2}

たとえば、次の CSS スタイル ルールは、h1 要素のテキストをすべて中央揃えにし、フォントの色を青にするように指定します。

h1 {text-align:center; color:blue;}

Bb398931.collapse_all(ja-jp,VS.110).gifさまざまな種類のスタイルの使用

スタイル ルールは、要素、class 属性を持つ要素、または ID を持つ要素に適用されます。 スタイル シートでは、これらはそれぞれ、セレクターによって表されます。 クラス ベースのセレクターの前にはピリオド (.) が付きます。 ID ベースのセレクターの前にはシャープ記号 (#) が付きます。 要素ベースのセレクターは、単純に h1 などの HTML 要素の名前です。 セレクターに、左中かっこ ({) と右中かっこ (}) に囲まれた一連のプロパティ宣言を加えたものがスタイル全体になります。

Bb398931.collapse_all(ja-jp,VS.110).gif要素ベースのスタイル

要素ベースのスタイルでは、特定の HTML 要素のすべてのインスタンスに適用されるプロパティを定義します (要素ベースのスタイルは、クラス ベースのスタイルまたは ID ベースのスタイルで要素の個々のインスタンスをオーバーライドできます)。たとえば、すべての段落 (p 要素) の周りに 25 ピクセルの余白を作成するとします。 これを行うには、中かっこで囲んだ余白のプロパティが後に続く p セレクターを使用したスタイルを作成します。 この要素ベースのスタイル ルールを次の例に示します。

p { margin-left: 25px; margin-right: 25px }

Bb398931.collapse_all(ja-jp,VS.110).gifクラス ベースのスタイル

クラス ベースのスタイルでは、特定の要素型 (たとえば、すべてではなく一部の p 要素) のサブセットに適用されるプロパティを定義します。 これらは、一部の p 要素、一部の span 要素などの異なる要素型にも適用できます。 この要素ベースのスタイル ルールを次の例に示します。 introduction は、スタイルのセレクター (クラスの名前) です。

.introduction {font-size: small; color: white}

<p> タグに使用するクラスを指定する方法を次の例に示します。

<p class="introduction">

注意

Visual Studio では、.css ファイルに定義されたクラスに照らしてマークアップ内のクラス名の妥当性が検査されることはありません。クラス名は、セマンティクス記述子やマイクロフォーマットとして使用されたり、ECMAScript コード内で使用されたり、まだ定義されていないスタイルを指定するために使用されたりすることがあるためです。

Bb398931.collapse_all(ja-jp,VS.110).gifID ベースのスタイル

ID ベースのスタイルでは、特定の ID 属性を持つ要素に適用されるプロパティを定義します。 ID ベースのスタイルは、Web ページ上の単一の HTML 要素にスタイルを設定する際によく使用されます。 この ID ベースのスタイル ルールを次の例に示します。 footer は、このスタイルが適用される ID を示します。

#footer {background-color: #CCCCCC; margin: 15px}

<p> タグに使用する ID を指定する方法を次の例に示します。

<p id="footer">

Bb398931.collapse_all(ja-jp,VS.110).gifCSS スタイルの記述

CSS スタイル ルールは、次を含む複数の場所に記述できます。

  • HTML マークアップのインライン

  • Web ページの style 要素

  • Web ページにリンクまたはインポートされている外部スタイル シート (.css ファイル)

通常は、Web サイト全体に適用されるルールを 1 つの外部スタイル シートに記述します。 1 つのページにのみ適用されるスタイル ルールは、そのページの style 要素に記述します。 1 つのページ要素に適用されるスタイル ルールは、インライン スタイルとして記述します。 多くのデザイナーおよび開発者が、すべてのスタイル ルールを 1 つ以上の外部スタイル シートに記述するとスタイルの管理が容易になることに気付いています。

Bb398931.collapse_all(ja-jp,VS.110).gifインライン スタイルの作成

インライン スタイル ルールは、スタイル属性を使用して要素の開始タグで定義されます。 インライン スタイルは、Web ページ上の単一要素のプロパティを定義する場合で、そのスタイルを再利用しない場合に使用します。 次に、インライン スタイルの例を示します。

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Bb398931.collapse_all(ja-jp,VS.110).gif内部 (ページ固有の) CSS スタイルの作成

CSS スタイル ルールは、Web ページの head 要素内の style 要素で定義できます。 この場合、スタイル ルールはそのページ内の要素のみに適用されます。

Web ページ上のすべての h1 要素に対する CSS スタイル ルールの定義方法および適用方法の例を次に示します。

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Element Style Example</title>
      <style>
        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 つのスタイル ルールを編集するだけで変更できます。

Bb398931.collapse_all(ja-jp,VS.110).gif外部カスケード スタイル シートの作成

外部スタイル シートは、スタイル ルールだけが格納された .css 拡張子を持つテキスト ファイルです。 次の例のように、link 要素を使用して、Web ページにスタイル シートをリンクさせることができます。

<link rel="stylesheet" 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 サイト全体にスタイルが適用されます。 スタイル シートにより、書式指定ルールは内容から分離されます。 この方法で、スタイル ルールの管理がより簡単になります。

Bb398931.collapse_all(ja-jp,VS.110).gifCSS スタイル ルールの優先順位の理解

CSS スタイル ルールは、優先順位に従うという意味で "連鎖" します。 グローバルなスタイル ルールは、まず HTML 要素に適用され、ローカルなスタイル ルールによってオーバーライドされます。 たとえば、Web ページ内の style 要素に定義れているスタイルは、外部スタイル シートに定義されているスタイルをオーバーライドします。 同様に、ページ上のある HTML 要素内に定義されているインライン スタイルは、他の場所でその同じ要素に対して定義されているスタイルより優先されます。

個々のグローバル スタイル ルールは、ローカル CSS スタイル ルールによってオーバーライドされない限り適用されます。 前述の例では、h1 要素に適用されるローカル CSS スタイルは、グローバルな h1 スタイル ルールの一部をオーバーライドしています (h1 テキストを中央揃えにして青で表示します)。 ただし、フォントの特性など、すべてのスタイルについては変更していません。 グローバル スタイル ルールとローカル スタイル ルールの両方がこの順序で適用されます。 その結果、このページ上のすべての h1 テキストは、大きいフォントと太字、および中央揃えの青で表示されます。

コード例

チュートリアル : CSS ファイルの作成と変更

チュートリアル : 既存の CSS ファイルの使用

方法 : [CSS のプロパティ] ウィンドウを使用する

トップに戻る

クラス リファレンス

CSS ツールに適用されるクラスはありません。

トップに戻る

ヒント

Visual Studio には、CSS を今までよりも簡単に操作できるいくつかのツールを含む豊富な CSS 編集機能が備わりました。 レイアウトのデザインおよびコンテンツのスタイル設定の大半は、[CSS のプロパティ] ウィンドウと、[スタイルの適用] ウィンドウおよび [スタイルの管理] ウィンドウを使用してデザイン ビューで作業できます。 配置、埋め込み、およびマージンの変更も、WYSIWYG ビジュアル レイアウト ツールを使用してデザイン ビューで行うことができます。

トップに戻る