チュートリアル : CSS ファイルの作成と変更
更新 : 2007 年 11 月
このチュートリアルでは、Visual Studio 2008 のカスケード スタイル シート (CSS: Cascading Style Sheets) 機能について説明します。3 列のページ レイアウトの作成方法、および新しい Web ページと新しいスタイル シートを作成する基本的な手法について説明します。
このチュートリアルでは、次のタスクについて説明します。
ファイル システム Web サイトの作成
CSS 指向の機能を使用した Web サイトのカスタマイズ
CSS を使用した 3 列のページ レイアウトの作成
前提条件
このチュートリアルを実行するには、以下が必要です。
Visual Studio 2008 または Visual Web Developer 2008 Express Edition。ダウンロード情報については、.NET Framework Developer Center の Web サイトを参照してください。
.NET Framework Version 3.5
Web サイトの作成
チュートリアルのこの部分では、Web サイトを作成し、そこにページを追加します。次のセクションでは、CSS ファイルを追加し、ページを Web ブラウザで実行します。
(「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順を実行するなどして) 既に Web サイトを作成してある場合はその Web サイトを使用できるので、このチュートリアルの「ページ要素の追加とスタイル設定」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトを作成します。
新しいファイル システム Web サイトを作成するには
Visual Web Developer で、[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ボックスで、[Visual Studio にインストールされたテンプレート] の下の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、「C:\CSSWebSite」というフォルダ名を入力します。
[言語] ボックスの一覧で、[Visual Basic] または [Visual C#] をクリックし、[OK] をクリックします。
.gif "メモ")
メモ :選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
ページ要素の追加とスタイル設定
要素を作成してスタイルを設定することに集中するのではなく、書式設定ツールおよびスタイル設定ツールに集中できるようにするために、このセクションでは一連のページ要素を提供します。これらの要素はコピーしてページに貼り付けることができます。コードには、見出しを含む div 要素で作成されたセクション、左サイドバーと右サイドバーのセクション、メイン コンテンツのセクション、およびフッターが含まれています。これらの単純な要素には、操作可能なテキストおよび要素 ID が含まれています。一部の要素には、ページ上の特定要素のスタイルを設定するために使用できる CSS クラスが含まれています。
ページ要素の追加
次の手順では、CSS ツールを使用して操作できるページ要素をコピーします。このページ要素は、テキストおよび検索ボックスを含む見出し、フッター、3 つのセクションのテキストで構成されています。ページのメイン コンテンツは、最後のテキスト セクションにあります。
ページ要素を既定ページに追加するには
Default.aspx ページを開くか、このページに切り替えます
メモ :Web サイトで使用できる任意のページを使用することもできます。
ソース ビューに切り替えます。
<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 情報を外部のスタイル シートに移動して、Visual Studio 2008 のその他の機能を使用できます。
ページ見出しの書式設定
書式設定する最初の要素は見出しセクションです。見出しセクションには、<div ID="banner"> タグで囲まれた要素が含まれています。この例では、[スタイルの適用] ツール バーを使用して、見出しのスタイル設定および位置指定を行います。また、見出し領域のサイズを設定し、背景色を追加します。
見出しテキストに書式を設定するには
デザイン ビューで、見出しセクション内の見出しテキスト、"AdventureWorks Styling Page" をクリックします。
選択すると、青いボックスが周囲に表示され、また h1 要素が選択されたことを示すタブが表示されます。
[スタイルの適用] ツール バーの [ターゲット規則] ボックスの一覧で、[新しいスタイルの適用] をクリックします。
[新しいスタイル] ダイアログ ボックスが表示されます。
[スタイルの適用] オプションの既定値は [手動] なので、手動でスタイルを適用します。
[セレクタ] の一覧で [h1] をクリックします。これで、すべての h1 要素に適用されるスタイルを作成できます。
[定義先] ボックスが [現在のページ] に設定されていることに注意してください。これは、現在のページの style 要素でスタイル ルールが作成されることを示しています。
[フォント ファミリ] の一覧で、[Impact] などの幅の広いフォントを選択します。
[フォント サイズ] の一覧で [最大] をクリックします。または「最大」と入力します。
[font-variant] の一覧で、[小型英大文字] をクリックします。または「小型英大文字」と入力します。
[OK] をクリックします。
作成されたスタイル ルールを確認するには、ソース ビューに切り替えて、head 要素内にある style 要素までスクロールします。
h1 要素に対し作成された CSS スタイル ルールを確認できます。
次の手順を使用して、見出しの h2 要素に同じ方法でスタイルを設定します。
手順 2. と同じ方法で [新しいスタイル] ダイアログ ボックスを開きます。
h2 要素を選択します。
[新しいスタイル] ボックスで [セレクタ] 値を [h2] に設定します。
[フォント ファミリ] を [Comic Sans MS] に設定し、[フォント サイズ] を [小] に設定します。
ページ要素の選択
Visual Studio 2008 では、複数の方法でページ上の要素を選択できます。デザイン ビュー ペインの下部にあるクイック タグ セレクタを使用できます。ページ上の任意の場所にカーソルを置くと、クイック タグ セレクタにより、その領域の基になっている HTML を表すタグが表示されます。クイック タグ セレクタ バーで、現在のタグを含むタグが、現在のタグの左側に表示されます。たとえば、カーソルがテーブル セルにある場合、td タグがクイック タグ セレクタ バーに表示され、その前にはテーブル行を表す tr タグ、およびテーブルを表す table タグが表示されます。
クイック タグ セレクタ内のタグの上にポインタを移動すると、デザイン ビューでタグの内容が強調表示され、タグの上に矢印が表示されます。この矢印をクリックすると、タグとその内容を選択すること、タグの内容のみ選択すること、タグを編集または削除すること、[クイック タグ エディタ] ダイアログ ボックスを開くこと、またはアイテムの [プロパティ] ダイアログ ボックスを開くことができます。
また、Esc キーを使用して要素の階層の上位に移動できます。たとえば、h1 要素は、見出しの div 要素内に含まれています。div 要素全体を選択するには、h1 要素をクリックして選択し、次に Esc キーを使用して見出しの div 要素を選択します。Esc キーを最初に押すと、h1 要素が強調表示され、要素の埋め込みと余白が示されるので注意してください (これらを設定していない場合、既定の設定が適用されます)。Esc キーをもう一度押すと、div 要素全体が選択されます。要素が選択されると、[div#banner] が表示されます。
見出しのサイズ変更とその内容の位置指定
[スタイルの適用] ツール バーを使用することで、デザイン ビューで見出しとその内容のサイズの変更、および位置の指定ができます。スタイル ルールは現在のページに書き込まれます。前のスタイル ルールが書き込まれた場所と同じ場所です。
| メモ : |
|---|
Ctrl キーと方向キーを使用して、既に設定されているサイズ要素の値を変更できます。たとえば、見出しの幅を 785 ピクセルにドラッグした場合、Ctrl キーと左方向キーを組み合わせて使用することで幅を 780 ピクセルに減らすことができます。 |
見出しのサイズを変更するには
デザイン ビューに切り替えます。
h1 テキスト ("AdventureWorks Styling Page") をクリックして選択し、次に Esc キーを 2 回押して外側の要素 (見出しの div 要素) を選択します。
右下隅にあるサイズ変更ハンドルをドラッグし、見出しの div 要素のサイズを変更します。
ドラッグすると、ツールヒントに幅と高さの値が表示されます。これらの値は、デザイン ビュー ウィンドウの下部にあるステータス バーにも表示されます。
要素のサイズを変更し、幅を 780 ピクセル程度、高さを約 100 ピクセル程度にします。
作成されたスタイル ルールを確認するには、分割ビューに移動し、style 要素までスクロールします。
見出しの div 要素に対して、(#banner セレクタを使用して) スタイル ルールが作成されているのを確認できます。
デザイン ビューで、見出しの div 要素が選択されていることを確認します (タグ ナビゲータで div#banner がまだ選択されていると思います)。
[書式] メニューの [背景色] をクリックします。
カラー ピッカーが表示されます。
見出しの色を選択し、[OK] をクリックします。
また、見出しのテキストを中央揃えにするスタイル ルールを適用することもできます。これを行うには、埋め込み値を設定します。
見出し内部の見出し要素の位置を指定するには
デザイン ビューで、見出しの div 要素を選択します。
[書式] メニューの [段落] をクリックします。
[段落] ダイアログ ボックスが表示されます。
h1 要素は見出しの div と同じ長さなので、h1 要素の内側にテキストを配置し、そのテキストを見出し領域内で中央揃えにすることができます。
[段落] ボックスの [配置] ドロップダウン リストで [中央] をクリックし、[OK] をクリックします。
h2 要素を選択し、手順 2. と手順 3. を繰り返します。
見出しの div 要素を選択します。
Shift キーを押しながらマウス ポインタを div 要素の端に合わせ、現在の埋め込み値をツールヒントに表示します。
埋め込みの端をドラッグし、埋め込みが div 要素の上部の境界に隣接するようにします。
2 つのテキスト要素が中央揃えになるまでドラッグします (約 30 ピクセル)。
見出しを完成させるには、検索の div 要素とその要素を見出しに配置する必要があります。Visual Studio 2008 の別の機能である位置指定グリッドを使用してこれを実行できます。
検索の div 要素を見出し内に配置するには
デザイン ビューで、div 要素 (div#search) を選択します。
[書式] メニューの [位置の設定] をクリックし、[絶対] をクリックします。
検索の div 要素をそのタブ (div#search というテキスト) によってドラッグし、見出しの内側、テキスト要素の右側の位置に移動します。
上および左の位置の値を示す 2 つの青い線が選択した位置から伸びます。
検索の div 要素を目的の位置までドラッグしたら離して配置します。
柔軟な 3 列のレイアウトの作成
Visual Web Developer を使用して、デザイン ビューでページ要素を書式設定することで、スタイル ルールを作成できます。また、これらの同じツールを使用して、ページ レイアウトも作成できます。
このチュートリアルでは、フロート スタイル ルールを使用して 3 列のレイアウトを作成します。最初に左サイドバーおよび右サイドバーのサイズと位置を設定し、次にメイン コンテンツ セクションの埋め込みを調整して、柔軟な 3 列のレイアウトを作成します。
| メモ : |
|---|
ツール バーを非表示にしないと、デザイン ビューで要素の正確な位置を確認できない場合があります。非表示にすると、領域が増えるのでページ要素の位置を確認できます。 |
サイドバー列の作成
見出しのサイズを変更したのと同じ方法で、ページ レイアウトのサイドバー列のサイズを変更できます。サイドバー列のサイズを変更するとき、テキストの長さに列の幅を合わせるために、幅の値のみ設定する必要がある場合 (つまり、高さの値は設定する必要がない場合) があります。div 要素の幅のみ設定するには、前の例のように div 要素の隅をドラッグするのではなく、div 要素の右側をドラッグします。
左サイドバーおよび右サイドバーの div 要素をサイズ変更および位置指定するには
デザイン ビューで、左サイドバーの div 要素を選択します (タグ ナビゲータで div.column#leftsidebar を選択することでも、これを行うことができます)。
左サイドバーの div 要素の右端をドラッグしてサイズを変更し、幅を 200 ピクセル程度にします。
ドラッグすると、高さの値がかっこ内に表示されます。かっこ内の値は設定対象ではありません。
[書式] メニューの [位置] をクリックします。
[位置] ダイアログ ボックスが表示されます。
[折り返しのスタイル] で [左] をクリックし、[OK] をクリックします。
右サイドバーの div 要素を選択し、その右端をドラッグして幅を 250 ピクセル程度にします。
[書式] メニューの [位置] をクリックします。
[折り返しのスタイル] で [右] をクリックし、[OK] をクリックします。
中央の列の作成
中央の列を作成するには、余白と埋め込みを設定して、左列および右列から離れた位置にコンテンツを移動します。最初に左の境界を作成し、次に埋め込みを使用してその境界から離れた位置にコンテンツを移動します。
中央の列のスタイルを設定するには
デザイン ビューで、メイン コンテンツの div 要素を選択します。
Ctrl キーを押しながら、メイン コンテンツの div 要素の右余白をドラッグし、右余白を 260 ピクセルに設定します。左余白はドラッグして 210 ピクセルに設定します。
メイン コンテンツの div 要素が選択されている状態で、[書式] メニューの [枠線とパターン] をクリックします。
[枠線とパターン] ダイアログ ボックスが表示されます。
[設定] の [カスタム] をクリックします。
[スタイル] の一覧で [純色] をクリックし、[プレビュー] で左境界のボタンをクリックします。
[幅] ボックスに、「1px」と入力します。
[埋め込み] の下の [左] ボックスに、「10px」と入力します。
[OK] をクリックします。
フッターの調整
ユーザーがページのサイズを変更した場合や、ページを大型モニタで表示した場合、フッターが折り返されて、いずれかの列の端に表示される場合があります。これを避けるには、クリア スタイル ルールを設定します。
フッターの div 要素を調整するには
デザイン ビューで、フッターの div 要素を選択します。
[書式] メニューの [新しいスタイル] をクリックします。
[新しいスタイル] ダイアログ ボックスが表示されます。
[セレクタ] ボックスで #footer を選択します。または「#footer」と入力します。
[カテゴリ] の一覧で [レイアウト] をクリックします。
[クリア] の一覧で [両方] をクリックします。
[OK] をクリックします。
スタイル シートの作成と使用
CSS を操作する効率的な方法は、スタイル シートにスタイル ルールを記述する方法です。記述したスタイルはすべてのページが参照できるので、一貫した外観となります。
また、ASP.NET テーマと共に CSS を使用できます。テーマと共にスタイル シートを使用するには、スタイル シートを適切なフォルダに格納する必要があります。テーマおよび CSS の詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。
スタイル シートを作成するには、新しいページを作成するために使用するのと同じ方法を使用します。
スタイル シートを作成し、ページに適用するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] で [スタイル シート] をクリックします。
[ファイル名] ボックスに「Layout.css」と入力し、[追加] をクリックします。
エディタが開き、空の body スタイル ルールを含む新しいスタイル シートが表示されます。
Default.aspx ページを開くか、Default.aspx ページに切り替えて、デザイン ビューに切り替えます。
[書式] メニューの [CSS のスタイル] をクリックし、[スタイルの管理] をクリックします。
[スタイルの管理] ウィンドウが開きます (既定では、このウィンドウはドッキングされます)。
[スタイル シートの適用] をクリックします。
[スタイル シートの選択] ダイアログ ボックスが表示されます。
Layout.css ファイルを選択し、[OK] をクリックします。
Layout.css という名前の新しいタブが [スタイルの管理] ウィンドウに作成されます。
ページにスタイル シートを割り当てる方法は複数あります。最も簡単な方法は、ソリューション エクスプローラからソース ビュー内のページの head 要素にファイルをドラッグする方法です。
ページからスタイル シートへスタイル ルールを移動
[スタイルの管理] ペインを使用して、あるページから別のページへスタイルを移動することや、スタイル ルールがページでどのように適用されているか確認することができます。
このチュートリアルではここまで、作成したスタイル ルールは Default.aspx ページの style 要素に保存してきました。これらのスタイル ルールは、作成した新しいスタイル シートへ移動できます。
[スタイルの管理] ペインを使用してスタイル ルールを移動するには
[スタイルの管理] ウィンドウの [現在のページ] タブで、すべてのスタイルを選択します (Shift キーを押しながらクリックすることで、すべてのスタイルを選択できます)。
選択したスタイルを [スタイルの管理] ウィンドウの [Layout.css] タブへドラッグします。
スタイル ルールが Default.aspx ページから削除され、Layout.css ファイルに移動します。ソース ビューで Default.aspx ページを表示すること、およびエディタで Layout.css ページに切り替えることでこれを確認できます。
また、[スタイルの管理] ウィンドウを使用することで、スタイル シート内のスタイルの順序を変更することもできます。たとえば、検索スタイル ルールをドラッグして、見出しスタイル ルールの直下へ移動できます。
次の手順
このチュートリアルでは、Visual Studio 2008 のユーザー インターフェイスを使用して CSS スタイルを操作する基本的な方法を説明しました。Web ページの外観を制御できる以下の方法を試してみることもできます。
既存のスタイル シートを操作します。詳細については、「チュートリアル : 既存の CSS ファイルの使用」を参照してください。
HTML 要素のスタイル情報をプログラムによって設定します。詳細については、「方法 : HTML サーバー コントロール プロパティをプログラムで設定する」を参照してください。
CSS スタイルだけでなく、ASP.NET コントロールのほぼすべてのプロパティを指定できるテーマとスキンを作成します。詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。
参照
処理手順
チュートリアル : Visual Web Developer での基本的な Web ページの作成