チュートリアル : CSS ファイルの作成と変更
このチュートリアルでは、カスケード スタイル シート (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 クラスが含まれています。
.gif "Bb398932.collapse_all(ja-jp,VS.110).gif")
ページ要素の追加
次の手順では、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 要素に同じ方法でスタイルを設定します。
デザイン ビューで、"Making CSS Styling Easier in Design View" (h2 要素) という見出しにポインターを移動します。
手順 2. と同じ方法で [新しいスタイル] ダイアログ ボックスを開きます。
[新しいスタイル] ボックスで [セレクター] 値を [h2] に設定します。
[フォント ファミリ] を [Comic Sans MS] に設定し、[フォント サイズ] を [小] に設定します。
[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 のテーマとスキン」を参照してください。