このセクションでは、ASP.NET MVC アプリケーションの各ページのレイアウトとスタイルの設定方法を紹介します。
ASP.NET MVC を学ぶために、インターネット アプリケーションを構築します。
パート 3: スタイルと統一感のある外観 (レイアウト) を追加します。
ファイル _Layout.cshtml は、アプリケーションの各ページのレイアウトを表します。これは、Views フォルダー内の Shared フォルダーにあります。
ファイル _Layout.cshtml を開き、内容を次のように置き換えます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title </title> <link href="@Url.Content("~/Content/Site.css") " rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js") "></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js") "></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("ホーム", "インデックス", "ホーム") </li> <li>@Html.ActionLink("映画", "インデックス", "映画") </li> <li>@Html.ActionLink("概要", "概要", "ホーム") </li> </ul> <section id="main"> @RenderBody() <p>著作権 W3CSchool 2012。全著作権所有。</p> </section> </body> </html>上記のコードでは、HTML 出力を変更するために HTML ヘルパーが使用されています。
@Url.Content() - URL コンテンツがここに挿入されます。
@Html.ActionLink() - HTML リンクがここに挿入されます。
HTML ヘルパーについては、このチュートリアルの後の章で詳しく説明します。
上記のコードで、赤でマークされたコードは、Razor タグを使用した C# です。
@ViewBag.Title - ページのタイトルがここに挿入されます。
@RenderBody() - ページのコンテンツがここにレンダリングされます。
C# および VB (Visual Basic) の Razor マークアップについては、Razor チュートリアルで学習できます。
アプリケーションのスタイル シートは Site.css で、Content フォルダーにあります。
Site.css ファイルを開き、コンテンツを次のように置き換えます。
body { font: "Trebuchet MS"、verdana、sans-serif; 背景色: #5c87b2; color: #696969; } h1 { border-bottom: 3px ソリッド #cc9900; #main { パディング: 20px; 境界線の半径: 0 4px 4px 4px; } a { color: #034af3 } /* メニュー スタイル --------------------------------- -*/ ul #menu { パディング: 0px; 位置: 相対; } ul#menu li { 表示: インライン; } ul#menu li a { 背景色: #e8eef4; text-decoration: none; line-height: 2.8em; /*CSS3 プロパティ*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover {background-color: #ffffff; --------------------------------*/ フィールドセット { パディング左: 12px; } フィールドセット ラベル { 表示: ブロック;パディング: 4px ; input[type="text"], input[type="password"] { width: 300px } input[type="submit"] { padding: 4px; /* データ スタイル --------- ----------*/ table.data { 背景色:#ffffff; ボーダー:1px ソリッド #c3c3c3; %; } table.data th {背景色:#e8eef4;ボーダー:1px ソリッド #c3c3c3; } table.data td {ボーダー:1px ソリッド #c3c3c3;Shared フォルダー (Views フォルダー内にある) の _ViewStart ファイルには、次のコンテンツが含まれています。
@{Layout = "~/Views/Shared/_Layout.cshtml";}このコードは、アプリケーションによって表示されるすべてのビューに自動的に追加されます。
このファイルを削除する場合は、このコード行をすべてのビューに追加する必要があります。
ビューについては、このチュートリアルの後の章で詳しく学習します。
通常、ViewStart ビューは Views ビューの直下に存在します。もちろん、他のフォルダーの下に ViewStart ビュー ページを置くこともできます (このフォルダーが Views フォルダーの下にある場合)。