チュートリアル : 既存の CSS ファイルの使用
このチュートリアルでは、Visual Studio のカスケード スタイル シート (CSS: Cascading Style Sheets) 機能について説明します。 ここでは、2 列のページ レイアウトを作成および変更する方法について説明します。 また、Web ページや新しい CSS を作成するための基本的な手法も示します。
注意
このトピックの例は、ASP.NET Web フォーム ページに固有のものです。ASP.NET MVC (Model View Controller) または ASP.NET Web ページ アプリケーション (.cshtml ファイル) でページを編集する際はソース ビューを使用できますが、デザイン ビューは Web フォーム ページのみを完全サポートしています。
このチュートリアルでは、次の作業について説明します。
ファイル システム Web サイトの作成
Visual Studio に用意された CSS 指向の機能の使用
CSS を使用した 2 列のページ レイアウトの作成
注意
このチュートリアルでは、「チュートリアル : CSS ファイルの作成と変更」で取り上げなかった Visual Studio の追加的機能について説明します。
必須コンポーネント
このチュートリアルを実行するには、次のコンポーネントが必要です。
Visual Studio または Visual Studio Express for Web がコンピューターにインストールされている。
注意
Visual Studio を使用している場合、このチュートリアルでは、最初に Visual Studio を起動したときに設定の [Web 開発] コレクションを選択していることを前提としています。詳細については、「方法: Web 開発環境の設定を選択する」を参照してください。
Visual Studio での作業方法の基本的な知識
Visual Studio での Web ページの作成方法の概要については、「チュートリアル: Visual Studio での基本的な Web フォーム ページの作成」を参照してください。
Web ページに追加できるイメージ。 このイメージは配置機能について説明する目的でのみ使用するため、実際のイメージは重要ではありません。
Web サイトの作成
チュートリアルのこの部分では、Web サイトを作成し、そこにページを追加します。
「チュートリアル: Visual Studio での基本的な Web フォーム ページの作成」の手順を実行するなど、既に Visual Studio で Web サイトを作成している場合は、その Web サイトを使用できるので、このチュートリアルの「HTML 要素と CSS ファイルの追加」に進むことができます。 それ以外の場合は、次の手順に従って、Web サイトを作成します。
注意
ASP.NET Web サイトおよび ASP.NET Web アプリケーションの既定のプロジェクト テンプレートには、Site.css ファイルが含まれています。このファイルには、マスター ページ (Site.master) およびコンテンツ ページ (Default.aspx および About.aspx) の外観を定義する CSS 規則が含まれています。このチュートリアルでは、空の ASP.NET 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 ページが作成され、ソース ビューで開かれます。
HTML 要素と CSS ファイルの追加
スタイル設定の対象となる要素を作成する手間を省き、書式設定およびスタイル設定ツールの操作に集中できるよう、このセクションでは一連の要素を提供します。 これらの要素はコピーしてページに貼り付けることができます。 コードには、見出しを含む div 要素で作成されたセクション、左サイドバーと右サイドバーのセクション、メイン コンテンツのセクション、およびフッターが含まれています。 これらの単純な要素には、操作可能なテキストおよび要素 ID が含まれています。 一部の要素には、ページ上のスタイル固有要素に対して使用できる CSS クラスが含まれています。
.gif "Bb398783.collapse_all(ja-jp,VS.110).gif")
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 サイトの名前を右クリックし、[追加] を選択し、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[インストールされたテンプレート] ペインで [スタイル シート] を選択します。
[名前] ボックスに「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 要素を削除します。
ファイルを保存します。
[表示] メニューの [スタイルの管理] をクリックします。
[スタイルの管理] ウィンドウが表示されます (既定では、このウィンドウはドッキングされています)。
[スタイルの管理] ウィンドウで、#rightsidebar スタイルを右クリックし、[削除] をクリックします。
注意
#rightsidebar スタイルのアイコンは、二重四角で囲まれていません。これは、このスタイルがもう使用されておらず、削除できることを示しています。
[スタイルの管理] ウィンドウで、#maincontent スタイルを右クリックし、[スタイルの変更] をクリックします。
[スタイルの変更] ダイアログ ボックスが表示されます。
[カテゴリ] の [ボックス] をクリックします。
[margin] の [right] ボックスの値を 0 に変更します。
[OK] をクリックします。
デザイン ビューに切り替えます。 2 列のレイアウトが表示されます。
ファイルを保存します。
イメージの追加
イメージのスタイルを設定する前に、プロジェクトにイメージを追加し、イメージの ImageUrl プロパティを設定する必要があります。
プロジェクトにイメージを追加するには
ソリューション エクスプローラーで、Web サイトの名前を右クリックし、[追加] を選択し、[既存の項目] をクリックします。
[既存項目の追加] ダイアログ ボックスが表示されます。
ダイアログ ボックスで、ファイルの種類を [イメージ ファイル] に設定します。
イメージ ファイルを選択し、[追加] をクリックします。
これでプロジェクトにイメージが追加されました。次は、このイメージをページ上に既にある Image コントロールに割り当てる必要があります。
イメージを Image コントロールに割り当てるには
デザイン ビューで Default.aspx ファイルを開くか、そのファイルに切り替えます。
ページ上の Image コントロールを選択します。
[プロパティ] ウィンドウで、[ImageUrl] の横にある省略記号ボタン ([...]) をクリックして、コントロールの ImageUrl プロパティを設定します。
[イメージの選択] ダイアログ ボックスが開きます。
プロジェクトに追加したイメージを選択し、[OK] をクリックします。
イメージを書式設定するためのスタイル ルールの追加
イメージの周囲にテキストをより自然に表示するには、イメージをメインの列の左または右にフローティングさせることができます。 埋め込みを追加してイメージからテキストを離すこともできます。
レイアウトにイメージを追加するには
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 のユーザー インターフェイスを使用して CSS スタイルを操作する基本的な方法を説明しました。 Web ページの外観を制御できる以下の方法を試してみることもできます。
新しいスタイル シートを使用します。 詳細については、「チュートリアル : CSS ファイルの作成と変更」を参照してください。
HTML 要素のスタイル情報をプログラムによって設定します。 詳細については、「方法: HTML サーバー コントロール プロパティをプログラムで設定する」を参照してください。
CSS スタイルだけでなく、ASP.NET コントロールのほぼすべてのプロパティを指定できるテーマとスキンを作成します。 詳細については、「ASP.NET のテーマとスキン」を参照してください。