ASP.NET RazorでCSSを指定するサンプル

nas2020/04/29

ASP.NETのRazorでCSSを指定するサンプルです。
言語はVB.NETです。

目次

外部のCSS 外部のCSSを指定する
  外部のCSSファイル
  ビュー
ビュー固有のCSS @Sectionでビュー固有のCSSを指定する

外部のCSSを指定する

外部のCSSを指定するサンプルです。

BundleConfig.vb

BundleConfig.vbに外部に出すcssファイルを指定します。(App_Start/BundleConfig.vb)

Imports System.Web.Optimization

Public Module BundleConfig
	' For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
	Public Sub RegisterBundles(ByVal bundles As BundleCollection)

		bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
					"~/Scripts/jquery-{version}.js"))

		bundles.Add(New ScriptBundle("~/bundles/jqueryval").Include(
					"~/Scripts/jquery.validate*"))

		' 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
		' ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
		bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
					"~/Scripts/modernizr-*"))

		bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
				  "~/Scripts/bootstrap.js",
				  "~/Scripts/respond.js"))

		bundles.Add(New StyleBundle("~/Content/css").Include(
				  "~/Content/bootstrap.css",
				  "~/Content/site.css"))

		bundles.Add(New StyleBundle("~/Content/project1").Include(
				  "~/Content/view1.css"))
	End Sub
End Module

26,27行目を追記しました。
26行目のStyleBundleクラスの引数は、呼び出すビューに追記する名称です。
27行目は、新規に追加するCSSです。

外部のCSSファイル

外部のCSSファイルです。(Content/view1.css)

@charset "UTF-8";
#p2 {
	color: blue;
}

ビュー

ビューです。(view1.vbhtml)

@Code
	Layout = Nothing
End Code
@Styles.Render("~/Content/project1")
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<p id="p2">CSSテスト</p>
</body>
</html>

4行目は、BundleConfig.vbの26行目に追記した名称を@Styles.Renderで指定しています。

@Sectionでビュー固有のCSSを指定する

@Sectionでビュー固有のCSSを指定するサンプルです。
_Layout.vbhtmlのように、共通部を定義している場合に使用します。

共通部のビュー(_Layout.vbhtml)

共通部のビューです※後半は省略。(Views/Shared/_Layout.vbhtml)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("test1", False)
</head>

10行目は、新規に追加しました。個別のビューからsectionのtest1と指定することで埋め込むことができます。
2つめの引数のfalseは、個別のビューでセクションが必須かどうかです。falseなので不要です。
renderは「与える」でsectionは「部分」という意味です。

ビュー

ビューです。(view1.vbhtml)

@Section test1
	<style>
		#p1 {
			color: red;
		}
	</style>
End Section
<body>
	<p id="p1">CSSテスト</p>
</body>

1行目は、_Layout.vbhtmlの10行目に定義したsectionと紐づきます。

以下は、Microsoftのバンドルと縮小のリンクです。
https://docs.microsoft.com/ja-jp/aspnet/mvc/overview/performance/bundling-and-minification

関連の記事

ASP.NET RazorでJavaScriptを指定するサンプル

△上に戻る