チュートリアル : 既存の CSS ファイルの使用
更新 : 2007 年 11 月
このチュートリアルでは、Visual Studio 2008 のカスケード スタイル シート (CSS: Cascading Style Sheets) 機能について説明します。ここでは、2 列のページ レイアウトを作成および変更する方法について説明します。また、新しい Web ページや新しい CSS を作成するための基本的な手法も示します。
このチュートリアルでは、次のタスクについて説明します。
ファイル システム Web サイトの作成
Visual Web Developer に用意された CSS 指向の機能の使用
CSS を使用した 2 列のページ レイアウトの作成
.gif "メモ")
メモ :このチュートリアルでは、「チュートリアル : CSS ファイルの作成と変更」で取り上げなかった Visual Studio 2008 の追加的機能について説明します。
前提条件
このチュートリアルを完了するには、次のコンポーネントが必要です。
Visual Studio 2008 または Microsoft Visual Web Developer Express Edition。ダウンロード情報については、Microsoft Visual Studio Express Edition の Web サイトを参照してください。
.NET Framework Version 3.5。
Web ページに追加できるイメージ。このイメージは配置機能について説明する目的でのみ使用するため、実際のイメージは重要ではありません。
Web サイトの作成
チュートリアルのこの部分では、Web サイトを作成し、そこにページを追加します。
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順を実行するなど、既に Visual Web Developer で Web サイトを作成している場合は、その Web サイトを使用できるので、このチュートリアルの「HTML 要素と CSS ファイルの追加」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトを作成します。
新しいファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、「C:\CSSWebSite」というフォルダ名を入力します。
[言語] ボックスの [Visual Basic] または [Visual C#] をクリックします。
選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
HTML 要素と CSS ファイルの追加
スタイル設定の対象となる要素を作成する手間を省き、書式設定およびスタイル設定ツールの操作に集中できるよう、このセクションでは一連の要素を提供します。これらの要素はコピーしてページに貼り付けることができます。コードには、見出し、左サイドバーと右サイドバーのセクション、メイン コンテンツのセクション、およびフッターを含む div 要素で構成されたセクションが含まれています。これらの単純な要素には、操作可能なテキストおよび要素 ID が含まれています。一部の要素には、ページ上の特定要素のスタイルを設定するために使用できる CSS クラスが含まれています。
HTML 要素の追加
ここでは、作業対象となるコンテンツを追加します。このページは、テキストおよび検索ボックスを含む見出し、フッター、および 3 つのテキスト セクションで構成されています。ページのメイン コンテンツは、最後のテキスト セクションにあります。
ページに HTML 要素を追加するには
ソース ビューで Default.aspx ページを開きます。
<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> <asp:Image ID="Image1" runat="server"/> <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 ファイルの追加
このセクションでは、前のセクションでページに追加した要素に書式とスタイルを設定する CSS (.css ファイル) を追加します。スタイル シートでは、ID に基づくスタイル ルールと、クラスに基づくスタイル ルールの両方を使用します。
CSS ファイルを追加するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [スタイル シート] をクリックします。
[ファイル名] ボックスに「Layout.css」と入力し、[追加] をクリックします。
エディタが開き、body スタイル ルールを含む新しいスタイル シートが表示されます。
body スタイル ルールを削除し、次のルールをファイルに貼り付けます。
#pagecontainer { width: 800px; } #banner { height: 126px; padding-top: 18px; background-color: #DD6B26; } #search { width: 254px; position: absolute; top: 115px; left: 545px; font-family: "Lucida Sans"; font-size: small; color: #930626; } #leftsidebar { width: 188px; float: left; padding-right: 10px; } #rightsidebar { width: 238px; float: right; padding-left: 6px; } #maincontent { border-left: 1px solid #DD6B26; margin-left: 203px; margin-right: 260px; padding-left: 13px; padding-right: 13px; } #footer { text-align: center; background-color: #DD6B26; } h1 { font-family: "Lucida Calligraphy"; font-size: x-large; font-weight: bold; color: #930626; text-align: center; height: 42px; margin-bottom: 0px; } h2 { font-family: "Lucida Sans"; font-variant: small-caps; font-size: large; color: #307630; font-weight: bold; text-align: center; margin-bottom: 0px; margin: 0; padding: 0; } p { font-family: "Palatino Linotype"; font-size: medium; }ファイルを保存します。
スタイル ルールのスタイル シートへの追加
既存の CSS スタイル シートを使用して作業する場合は、[スタイルの管理] ウィンドウを使用して、スタイル シート内のスタイル ルールを変更できます。このチュートリアルでは、ページを元の 3 列のレイアウトから 2 列のレイアウトに変更します。次に、元のレイアウトに適用されていたスタイルを削除します。
右側の列の削除とスタイルの変更
ページ レイアウトを 2 列のレイアウトに変更するには、右側の列を作成するコードを削除します。次に、他の要素のスタイルを変更して、2 列のレイアウトを作成します。
右側の列のコードと書式設定を削除するには
Default.aspx ページを開くか、このページに切り替えます
デザイン ビューに切り替えます。
ソリューション エクスプローラで、作成した .css ファイルをドラッグして、ページ上にドロップします。
これにより、.css ファイルが現在のページに関連付けられます。ページが変更され、.css ファイルで定義されたスタイルが反映されます。
ソース ビューに切り替えます。
<div id="rightsidebar" class="column"> で始まる div 要素を削除します。
ファイルを保存します。
[書式] メニューの [CSS のスタイル] をクリックし、[スタイルの管理] をクリックします。
[スタイルの管理] ウィンドウが表示されます (既定では、このウィンドウはドッキングされています)。
[スタイルの管理] ウィンドウで、#rightsidebar スタイルを右クリックし、[削除] をクリックします。
メモ :#rightsidebar スタイルのアイコンは、丸で囲まれていません。これは、このスタイルがもうページ上で使用されておらず、削除できることを示しています。
[スタイルの管理] ウィンドウで、#maincontent スタイルを右クリックし、[スタイルの変更] をクリックします。
[スタイルの変更] ダイアログ ボックスが表示されます。
[カテゴリ] の [ボックス] をクリックします。
[margin] の [right] ボックスの値を 0 に変更します。
[OK] をクリックします。
デザイン ビューに切り替えます。2 列のレイアウトが表示されます。
ファイルを保存します。
イメージの追加
イメージのスタイルを設定する前に、プロジェクトにイメージを追加し、イメージの ImageUrl プロパティを設定する必要があります。
プロジェクトにイメージを追加するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[既存項目の追加] をクリックします。
[既存項目の追加] ダイアログ ボックスが表示されます。
イメージ ファイルを選択し、[追加] をクリックします。
これでプロジェクトにイメージが追加されました。次は、このイメージを Image コントロールに割り当てる必要があります。
イメージを Image コントロールに割り当てるには
Default.aspx ファイルを開くか、このファイルに切り替えます。
デザイン ビューに切り替え、Image コントロールを選択します。
[プロパティ] ウィンドウで、Image コントロールの ImageUrl プロパティを新しく追加したイメージ ファイルの URL に設定します。
イメージを書式設定するためのスタイル ルールの追加
イメージをテキスト内でより自然に表示するため、イメージをメインの列の左端または右端にフローティングさせ、埋め込みを追加して、テキストをイメージから離して表示します。
レイアウトにイメージを追加するには
Layout.css ファイルを開くか、このファイルに切り替えます。
スタイル シートに次のコードを追加します。
img { margin: 0px; border: 1px solid #DD6B26; padding: 5px; } .floatright { margin-left: 10px; float:right; } .floatleft { float: left; margin-right: 10px; }Default.aspx ファイルを開くか、このファイルに切り替えます。
デザイン ビューに切り替え、Image コントロールを選択します。
[スタイルの管理] ウィンドウで、floatright CSS スタイルまたは floatleft CSS スタイルを Image コントロールに適用します。これには、CSS スタイルを右クリックし、[スタイルの適用] をクリックします。
選択した CSS スタイルが img スタイルに割り当てられます。
次の手順
このチュートリアルでは、Visual Studio 2008 のユーザー インターフェイスを使用して CSS スタイルを操作する基本的な方法を説明しました。Web ページの外観を制御できる以下の方法を試してみることもできます。
新しいスタイル シートを使用します。詳細については、「チュートリアル : CSS ファイルの作成と変更」を参照してください。
HTML 要素のスタイル情報をプログラムによって設定します。詳細については、「方法 : HTML サーバー コントロール プロパティをプログラムで設定する」を参照してください。
CSS スタイルだけでなく、ASP.NET コントロールのほぼすべてのプロパティを指定できるテーマとスキンを作成します。詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。