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

[アーティクル]
11/15/2012

このチュートリアルでは、カスケードスタイルシート (CSS) を使用するのに役立つ Visual Studio の機能について説明します。 3 列のページレイアウトの作成方法について説明します。また、Web ページと新しいスタイルシートを作成する基本的な手法についても説明します。

注意

このトピックの例は、ASP.NET Web フォームページに固有のものです。ASP.NET MVC (Model View Controller) または ASP.NET Web ページアプリケーション (.cshtml ファイル) でページを編集する際はソース ビューを使用できますが、デザイン ビューおよび分割ビューは Web フォームページのみを完全サポートしています。

このチュートリアルでは、次の作業について説明します。

ファイルシステム Web サイトの作成
CSS 指向の機能を使用した Web サイトのカスタマイズ
CSS を使用した 3 列のページレイアウトの作成

必須コンポーネント

このチュートリアルを実行するには、以下が必要です。

Visual Studio または Visual Studio Express for Web がコンピューターにインストールされている。

注意

Visual Studio を使用する場合、このチュートリアルでは、Visual Studio の初回の起動時に [Web 開発] 設定コレクションを選択したことを前提とします。詳細については、「方法: Web 開発環境の設定を選択する」を参照してください。
Visual Studio での作業方法の一般的な知識。

Visual Studio での Web ページの作成方法の概要については、「チュートリアル: Visual Studio での基本的な Web フォームページの作成」を参照してください。

Web サイトの作成

チュートリアルのこの部分では、Web サイトを作成し、そこに Web フォームページを追加します。次のセクションでは、CSS ファイルを追加し、ページをブラウザーで実行します。

「チュートリアル: Visual Studio での基本的な Web フォームページの作成」の手順を実行するなど、既に Web サイトを作成している場合は、その Web サイトを使用できるので、このチュートリアルの「ページ要素の追加とスタイル設定」に進むことができます。それ以外の場合は、次の手順に従って、Web サイトを作成します。

注意

ASP.NET Web サイトおよび ASP.NET Web アプリケーションの既定のプロジェクトテンプレートには、ビルド済みの Site.css ファイルが含まれています。このファイルには、マスターページ (Site.master) およびコンテンツページ (Default.aspx および About.aspx) の外観を定義する CSS 規則が含まれています。このチュートリアルでは、CSS の作成方法および ASP.NET Web ページでの操作方法について説明します。空の Web サイトプロジェクトから始めて、サイトに CSS の機能を追加します。

ファイルシステム Web サイトを作成するには

Visual Studio または Visual Studio Express for Web を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。

[新しい Web サイト] ダイアログボックスが表示されます。
[インストールされたテンプレート] の [Visual Basic] または [Visual C#] をクリックし、[ASP.NET 空の Web サイト] をクリックします。
[Web の場所] ボックスで、[ファイルシステム] をクリックし、Web サイトのページを格納するフォルダーの名前を入力します。

たとえば、フォルダー名として「C:\WebSites」と入力します。
[OK] をクリックします。

Visual Studio は、Web.config ファイル以外のページまたはファイルを含まない Web サイトプロジェクトを作成します。
ソリューションエクスプローラーで、Web サイトの名前を右クリックし、[追加] を選択し、[新しい項目の追加] をクリックします。
[Web フォーム] をクリックし、ページに「Default.aspx」と名前を付けて [追加] をクリックします。

Visual Studio で Default.aspx ページが作成され、ソース ビューで開かれます。

ページ要素の追加とスタイル設定

ここでは、Visual Studio の書式設定ツールおよびスタイルツールで変更する一連のページ要素を提供します。これらの要素はコピーしてページに貼り付けることができます。コードには、見出しを含む div 要素で作成されたセクション、左サイドバーと右サイドバーのセクション、メインコンテンツのセクション、およびフッターが含まれています。これらの単純な要素には、操作可能なテキストおよび要素 ID が含まれています。一部の要素には、ページ上のスタイル固有要素に対して使用できる CSS クラスが含まれています。

ページ要素の追加

次の手順では、CSS ツールを使用して操作できるページ要素をコピーします。このページ要素は、テキストおよび検索ボックスを含む見出し、フッター、3 つのセクションのテキストで構成されています。ページのメインコンテンツは、最後のテキストセクションにあります。

ページ要素を既定ページに追加するには

Default.aspx ページを開くか、そのページに切り替えます
ソース ビューに切り替えます。
<form> セクション内に既定で作成された空の <div></div> タグペアを削除します。

<form> 開始タグの後ろに、次のコードを追加します。

<div id="pagecontainer">
  <div id="banner">
    <h1>AdventureWorks Styling Page</h1>
    <h2>Making CSS Styling Easier in Design View</h2>
    <div id="search">Find:<input id="searchbox" type="text" />
      <input id="searchbutton" type="button" value="Go" />
   </div>
</div>
<div id="leftsidebar" class="column">
  <h3>Matters of the Web</h3>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
  <h3>Matters of the Web</h3>
   <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
  <h2>Matters of the Web</h2>
  <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
  <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

注意

ページを読みやすくするには、[編集] メニューの [ドキュメントのフォーマット] をクリックします。

ページを保存します。
デザイン ビューに切り替えて既定の書式を確認します。

デザインビューでのスタイル設定の適用

デザイン ビューを使用することで、ページ要素にスタイル設定を適用し、その結果をすぐに確認できます。 .css ファイルを作成して変更し、その後スタイル設定が希望どおりになっているかどうかを確認するためにページに切り替える必要はありません。

デザイン ビューでは、ページ上の個々の要素に対して次の方法でスタイル設定を適用できます。

個々の要素の style 属性として記述する、インラインスタイルを使用します。これらのスタイルルールはその要素にのみ適用可能です。
ページの HTML head セクション内の <style> 要素にスタイルルールを記述します。これらのスタイルルールは現在のページ内の要素に適用できます。
外部 CSS ファイルにスタイルルールを記述します。この場合、スタイルルールは Web サイトのすべてのページに適用できます。

チュートリアルのこのページでは、ページの style セクションに書き込む書式設定ルールおよびスタイルルールを定義します。その後、作成する CSS 情報を外部スタイルシートに移動します。

ページ見出しの書式設定

書式設定する最初の要素は見出しセクションです。見出しセクションには、<div ID="banner"> タグで囲まれた要素が含まれています。この例では、[新しいスタイル] ダイアログボックスを使用して、見出しのスタイル設定および位置指定を行います。また、見出し領域のサイズを設定し、背景色を追加します。

見出しテキストに書式を設定するには

デザイン ビューで、見出しセクション内の見出しテキスト、"AdventureWorks Styling Page" をクリックします。

選択すると、青いボックスが周囲に表示され、また h1 要素が選択されたことを示すタブが表示されます。
[書式設定] ツールバーの [ターゲット規則] ボックスの一覧で、[新しいスタイルの適用] をクリックします。または、[書式設定] メニューの [新しいスタイル] を選択します。

ヒント

[書式設定] ツールバーが既定で有効になります。有効にするには、[表示] メニューの [ツールバー] を選択し、[書式設定] を選択します。

[新しいスタイル] ダイアログボックスが表示されます。
[セレクター] の一覧で [h1] をクリックします。これで、すべての h1 要素に適用されるスタイルを作成できます。

[定義先] ボックスが [現在のページ] に設定されていることに注意してください。 [現在のページ] には、現在編集しているページの style 要素でスタイルルールが作成されることが示されます。
[フォントファミリ] の一覧で一般に見出しに使用される [Impact] などのフォントを選択します。

フォントは [プレビュー] ウィンドウでプレビューします。
[フォントサイズ] の一覧で [最大] をクリックします。または「最大」と入力します。
[font-variant] の一覧で、[小型英大文字] をクリックします。または「小型英大文字」と入力します。
[OK] をクリックします。
作成されたスタイルルールを確認するには、ソース ビューに切り替えて、head 要素内にある style 要素までスクロールします。

h1 要素に対し作成された CSS スタイルルールを確認できます。
次の手順を使用して、見出しの h2 要素に同じ方法でスタイルを設定します。
1. デザイン ビューで、"Making CSS Styling Easier in Design View" (h2 要素) という見出しにポインターを移動します。
2. 手順 2. と同じ方法で [新しいスタイル] ダイアログボックスを開きます。
3. [新しいスタイル] ボックスで [セレクター] 値を [h2] に設定します。
4. [フォントファミリ] を [Comic Sans MS] に設定し、[フォントサイズ] を [小] に設定します。
5. [OK] をクリックします。

ページ要素の選択

Visual Studio では、複数の方法でページ上の要素を選択できます。 デザイン ビューペインの下部にあるクイックタグセレクターを使用できます。ページ上の任意の場所にカーソルを置くと、クイックタグセレクターにより、その領域の基になっている HTML を表すタグが表示されます。クイックタグセレクターバーで、現在のタグを含むタグが、現在のタグの左側に表示されます。たとえば、挿入ポイントがテーブルのセル内にある場合、table タグと tr タグが td タグの前に表示されます。

クイックタグセレクターでタグ上にポインターを置くと、矢印がタグに表示されます。この矢印をクリックしてタグとその内容を選択するか、タグの内容のみを選択します。

また、Esc キーを使用して要素の階層の上位に移動できます。たとえば、h1 要素は、見出しの div 要素内に含まれています。 div 要素全体を選択するには、h1 要素をクリックして選択し、次に Esc キーを使用して見出しの div 要素を選択します。 Esc キーを最初に押すと、h1 要素が強調表示され、要素の埋め込みと余白が示されます。 Esc キーをもう一度押すと、div 要素全体が選択されます。要素が選択されると、[div#banner] が表示されます。

見出しのサイズ変更とその内容の位置指定

[書式設定] ツールバーを使用することで、デザイン ビューで見出しとその内容のサイズの変更、および位置の指定ができます。スタイルルールは現在のページに書き込まれます。前のスタイルルールが書き込まれた場所と同じ場所です。

注意

Ctrl キーと方向キーを使用して、既に設定されているサイズ要素の値を変更できます。たとえば、見出しの幅を 785 ピクセルにドラッグした場合、Ctrl キーと左方向キーを組み合わせて使用することで幅を 780 ピクセルに減らすことができます。

見出しのサイズを変更するには

デザイン ビューに切り替えます。
h1 テキスト ("AdventureWorks Styling Page") をクリックして選択した後、Esc キーを 2 回押します。このアクションにより、banner という名前の div 要素である囲む要素が選択されます。
右下隅にあるサイズ変更ハンドルをドラッグし、見出しの div 要素のサイズを変更します。

ドラッグすると、ツールヒントに幅と高さの値が表示されます。これらの値は、デザイン ビューウィンドウの下部にあるステータスバーの左下隅にも表示されます。
要素のサイズを変更し、幅を 780 ピクセル程度、高さを約 125 ピクセル程度にします。
作成されたスタイルルールを確認するには、分割ビューに移動し、style 要素までスクロールします。

見出しの div 要素に対して、(#banner セレクターを使用して) スタイルルールが作成されているのを確認できます。
デザイン ビューに切り替えます。
見出しの div 要素が選択されていることを確認します (タグナビゲーターで div#banner がまだ選択されていると思います)。
[書式] メニューの [枠線とパターン] をクリックします。

[枠線とパターン] ダイアログボックスが表示されます。

[網掛け] タブを選択して、[背景色] を選択し、[その他の色] をクリックします。

[その他の色] ダイアログボックスが表示されます。
見出しの背景色を選択し、[OK] をクリックします。

分割ビューでは、background-color の設定を含むよう見出しのスタイルルールが更新されたことを確認できます。
フォームの幅を見出しに合わせて調整するには、form 要素を選択します。次に、右側のサイズ変更ハンドルをドラッグして、フォームの幅を 780 ピクセルに減らします。

また、埋め込み値を設定することによって、見出しのテキストを中央揃えにするスタイルルールを適用することもできます。

見出し内部の見出し要素の位置を指定するには

デザイン ビューで、見出しの h1 要素を選択します。
[書式] メニューの [段落] をクリックします。

[段落] ダイアログボックスが表示されます。
[段落] ボックスの [配置] ドロップダウンリストで [中央] をクリックし、[OK] をクリックします。
h2 要素を選択し、手順 2. と手順 3. を繰り返します。

見出しを完成させるには、位置指定グリッドを使用して、検索の div 要素とその要素を見出しに配置します。

検索の div 要素を見出し内に配置するには

デザイン ビューで、div 要素 (div#search) を選択します。ページの上部にあるこの要素には、検索ボックスが含まれます。
[書式] メニューの [位置の設定] をクリックし、[絶対] をクリックします。
div#search 要素をそのタブによってドラッグし、見出しの内側、テキスト要素の右側の位置に移動します。

上および左の位置の値を示す 2 つの青い線が選択した位置から伸びます。
検索の div 要素を目的の位置とサイズに設定したら、離して配置します。

柔軟な 3 列のレイアウトの作成

Visual Studio を使用して、デザイン ビューでページ要素を書式設定することで、スタイルルールを作成できます。また、これらの同じツールを使用して、ページレイアウトも作成できます。

このチュートリアルでは、float スタイルルールを使用して 3 列のレイアウトを作成します。最初に、左右のサイドバーのサイズと位置を設定します。次に、主コンテンツセクションの余白を調整して、柔軟な 3 列のレイアウトを作成します。

注意

ツールバーを非表示にしないと、デザイン ビューで要素の正確な位置を確認できない場合があります。ツールバーを非表示にすると、領域が増えるのでページ要素の位置を確認できます。

サイドバー列の作成

見出しのサイズを変更したのと同じ方法で、ページレイアウトのサイドバー列のサイズを変更できます。サイドバーの列のサイズを変更するとき、幅の値のみを設定し、高さの値は設定しないでおくことができます。高さの値を指定しないと、テキストは列の長さを必要に応じて拡張できます。 div 要素の幅のみ設定するには、要素の隅をドラッグするのではなく、div 要素の右側をドラッグします。

左サイドバーおよび右サイドバーの div 要素をサイズ変更および位置指定するには

分割ビューの HTML ソースコードで、左側のサイドバーの div 要素を選択します。
左サイドバーの div 要素の右端を左にドラッグしてサイズを変更し、幅を 200 ピクセル程度にします。

ドラッグすると、高さの値がかっこ内に表示されます。かっこ内の値は設定対象ではありません。
[書式] メニューの [位置] をクリックします。

[位置] ダイアログボックスが表示されます。
[折り返しのスタイル] で [左] をクリックし、[OK] をクリックします。
右サイドバーの div 要素を選択し、その右端をドラッグして幅を 290 ピクセル程度にします。
[書式] メニューの [位置] をクリックします。
[折り返しのスタイル] で [右] をクリックし、[OK] をクリックします。

中央の列の作成

中央の列を作成するには、余白と埋め込みを設定して、左列および右列から離れた位置にコンテンツを移動します。最初に左の境界を作成し、次に埋め込みを使用してその境界から離れた位置にコンテンツを移動します。

中央の列のスタイルを設定するには

デザイン ビューまたは分割ビューで、メインコンテンツの div 要素を選択します。
Ctrl キーを押しながら、メインコンテンツの div 要素の右の余白をドラッグして、右の余白を 290 ピクセルに設定します。左の余白をドラッグして、値を 210 ピクセルにします。

あるいは、ソース ビューまたは分割ビューを使用して次のスタイル規則を作成することもできます。
```
#maincontent
{
    margin-right: 290px;
    margin-left: 210px;
}
```
メインコンテンツの div 要素を選択し、[書式] メニューの [枠線とパターン] をクリックします。

[枠線とパターン] ダイアログボックスが表示されます。
[設定] の [カスタム] をクリックします。
[スタイル] の一覧で [純色] をクリックし、[プレビュー] で左境界と右境界の両方のボタンをクリックします。
[幅] ボックスで、1 を選択します。
[間隔] の下の [左] ボックスと [右] ボックスで 10 を選択します。
[OK] をクリックします。

ソース ビューまたは分割ビューで、#maincontent 要素のスタイルの定義が更新されたことを確認します。

フッターの調整

ユーザーがページのサイズを変更した場合や、ページを大型モニターで表示した場合、フッターがいずれかの列の端に表示される場合があります。この折り返し動作を避けるには、clear スタイルルールを設定します。

フッターの div 要素を調整するには

デザイン ビューで、フッターの div 要素を選択します。
[書式] メニューの [新しいスタイル] をクリックします。

[新しいスタイル] ダイアログボックスが表示されます。
[セレクター] ボックスで #footer を選択します。または「#footer」と入力します。
[カテゴリ] の一覧で [レイアウト] をクリックします。
[クリア] の一覧で [両方] をクリックします。
[OK] をクリックします。

スタイルシートの作成と使用

これまでは、ページで要素を直接操作することにより、スタイル定義を作成しました。スタイル定義は、ページの head 要素内 style 要素に保存しました。これらのスタイル設定は、現在のページにのみ適用されます。

CSS を操作する効率的な方法は、すべての Web ページが参照できるスタイルシートにスタイルルールを記述する方法です。スタイルシートを作成するには、ページを作成するために使用するのと同じ方法を使用します。

スタイルシートを作成し、ページに適用するには

ソリューションエクスプローラーで、Web サイトの名前を右クリックし、[追加] をクリックして、[新しい項目の追加] をクリックします。
テンプレートの一覧で、[スタイルシート] を選択します。
[ファイル名] ボックスに「Layout.css」と入力し、[追加] をクリックします。

エディターが開き、空の body スタイルルールを含む新しいスタイルシートが表示されます。
Default.aspx ページを開くか、Default.aspx ページに切り替えて、デザイン ビューに切り替えます。
[表示] メニューの [スタイルの管理] をクリックします。

[スタイルの管理] ウィンドウが開きます (既定では、このウィンドウはドッキングされます)。
[スタイルの管理] ウィンドウのツールバーで、[スタイルシートの適用] をクリックします。

[スタイルシートの選択] ダイアログボックスが表示されます。
Layout.css ファイルを選択し、[OK] をクリックします。

Layout.css という名前の新しいタブが [スタイルの管理] ウィンドウに作成されます。 Layout.css ファイルが現在のドキュメントに添付されます。 ソース ビューまたは分割ビューで、以下のような link 要素がページの先頭要素に追加されていることを確認できます。
```
<link href="Layout.css" rel="stylesheet" type="text/css" />
```
これは、スタイルシートをページに割り当てるために [スタイルの管理] ウィンドウを使用する方法を示しています。スタイルシートは、他の方法でページに割り当てることもできます。たとえば、ソリューションエクスプローラーからソース ビューのページの head 要素に、スタイルシートファイルをドラッグすることもできます。 ソリューションエクスプローラーからファイルをドラッグして、デザイン ビュー内のページのどこかにドロップすることもできます。

ページからスタイルシートへスタイルルールを移動

[スタイルの管理] ペインを使用して、あるページから別のページへスタイルを移動することや、スタイルルールがページでどのように適用されているか確認することができます。定義したスタイルルールは、作成した新しいスタイルシートへ移動できます。

[スタイルの管理] ペインを使用してスタイルルールを移動するには

Default.aspx ページに切り替えます。
デザイン ビューに切り替えます。
[スタイルの管理] ウィンドウの [現在のページ] セクションで、すべてのスタイルを選択します (最初のスタイルを選択し、Shift キーを押しながら最後のスタイルをクリックすると、すべてのスタイルが選択されます)。
[スタイルの管理] ウィンドウで、選択したスタイルを Layout.css セクションの本体アイコンまでドラッグします。

スタイルルールが Default.aspx ページから削除され、Layout.css ファイルに移動します。 ソース ビューで Default.aspx ページを表示すること、およびエディターで Layout.css ページに切り替えることでこれを確認できます。

また、[スタイルの管理] ウィンドウを使用することで、スタイルシート内のスタイルの順序を変更することもできます。

次の手順

このチュートリアルでは、Visual Studio のユーザーインターフェイスを使用して CSS スタイルを操作する基本的な方法を説明しました。 Web ページの外観を制御できる以下の方法を試してみることもできます。

既存のスタイルシートを操作します。詳細については、「チュートリアル : 既存の CSS ファイルの使用」を参照してください。
HTML 要素のスタイル情報をプログラムによって設定します。詳細については、「方法: HTML サーバーコントロールプロパティをプログラムで設定する」を参照してください。
CSS スタイルだけでなく、ASP.NET コントロールのほぼすべてのプロパティを指定できるテーマとスキンを作成します。詳細については、「ASP.NET のテーマとスキン」を参照してください。

参照

その他の技術情報

チュートリアル: Visual Studio での基本的な Web フォームページの作成

Visual Studio の Web サイトプロジェクトの種類