レイアウト(外枠の見た目) - クイックスタート

RealPath:

WebPath:

2018/08/12 10:29 (JST) 更新

クイックスタート >>

Web サイトの一般的な構成

だいたい Web サイトの見た目というのは同じサイト内であれば異なるページの間でも外枠の構成や背景は統一されていることが多いものです。

このようなサイトの基調となるような共通部分を一元管理する仕組みとして レイアウト 機能があります。
本ページではこのレイアウト機能について紹介します。

レイアウトファイルの場所

デフォルトでは Views/Shared/_Layout.cshtml というファイルにレイアウトが定義されています。

img--600--size

ここでサイト全体の基調、つまりサイト全体で共通する外枠の HTML 部分が構成されています。

レイアウトファイルの変更

試しに以下のようにレイアウトファイル (Views/Shared/_Layout.cshtml) の書き換えを行ってみます。（@ で始まる変数やメソッド等については今回は解説しませんがなんとなく察してください）

<title>@ViewBag.Title - My ASP.NET Application</title>
↓
<title>FUGA</title>

<body>
↓
<body style="background-color: #cff;">

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
  ↓
@Html.ActionLink("HOGE", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  ↓
<li>@Html.ActionLink("A", "Index", "Home")</li>
<li>@Html.ActionLink("B", "About", "Home")</li>
<li>@Html.ActionLink("C", "Contact", "Home")</li>

<footer>
    <p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
↓
<footer>
    <p>© 1999 - ASP</p>
</footer>

変更結果

img--400--size

赤枠部分および背景が変更されました。（今回は title 部分も変更したのでブラウザのタブ部分にも変更が及んでいます）

レイアウト内のメインコンテンツを表示する場所

レイアウトファイル (_Layout.cshtml) 内の

@RenderBody()

という場所で実際のメインコンテンツが出力されます。
Hello World の例であれば About.cshtml 部分がここに埋め込まれる形となります。

その他レイアウト編集例

例えばですが、_Layout.cshtml の body 部分を以下のようにしてみます。

<body>
    <div class="container body-content">
        <div class="row">
            <div class="col-sm-2" style="background-color: #faa; height: 200px;">
                LEFT
            </div>
            <div class="col-sm-8">
                @RenderBody()
            </div>
            <div class="col-sm-2" style="background-color: #afa; height: 200px;">
                RIHGT
            </div>
        </div>
        <hr />
        <footer>
            <p>© 1999 - ASP</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

結果、見た目はこんな感じになります。メインコンテンツのビューを変えずに、レイアウトファイルを編集することで、サイト全体の基調をいじることができるわけです。
img--700--size