サイトレイアウトの作成

最終更新日: 2021.03.09

このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します：Xperienceのインターフェース

以下について説明します

CSSリソースの追加
サイトレイアウトの作成
ViewStartファイルの追加

チュートリアルのウェブサイトが順調に立ち上がってきました。前のステップでは、ライブサイトアプリケーションを構築するために必要なすべてのリソースを作成しました。

ウェブサイトで一貫したエクスペリエンスを実現するために、レイアウトビューを作成します。このビューには、ウェブサイトのヘッダー、ナビゲーションメニュー、フッターのコンテンツが含まれ、ウェブサイト上のすべてのページで統一された外観を保証します。また、プロジェクト内のすべてのビューにデフォルトのレイアウトを割り当てる _ViewStart ファイルを追加します。

CSSリソースの追加

Medioクリニックのウェブサイトの基本的なデザインは、チュートリアルリソース内のstyles.cssファイルのCSSスタイルに依存しています（リソースはこちらからダウンロードできます：TutorialWebsite.zip）。

以下の手順でCSSリソースを追加します。

Visual Studio でライブサイトプロジェクトを開きます。
プロジェクトのルートディレクトリに wwwrootフォルダを作成します。
wwwrootフォルダ内にcssフォルダを作成します。
チュートリアルリソースのstyles.cssファイルをcssフォルダに追加します。

これで、あなたのプロジェクトには、ウェブサイトのデザインを定義するために使用するスタイルシートが含まれています。

サイトレイアウトの作成

このステップでは、レイアウトビューを作成します。

Visual Studioで、Views/Shared/Layout.cshtmlを開きます。
Layout.cshtml内のコードを、チュートリアルリソースのindex.htmlファイル内のサンプルコードに置き換えます（リソースはこちらからダウンロードできます：TutorialWebsite.zip）。
「<title>...</title>」タグを探し、ハードコードされたページタイトルの"Tutorial website"をMedio Clinic~接頭辞とRazorコール「@ViewBag.Title」に置き換えます。
「<head>」タグの中にサイトのCSSを含むファイルをリンクします。
```
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
```
「</head>」タグを閉じる前に styles Razor セクションを追加します。このセクションはページビルダーを使うビューのためのページ固有のスタイルシートを追加するために使われます。
```
@RenderSection("styles", required: false)
```
閉じている「</header>」タグと開いている「<footer>」タグの間の内容を削除し、Razorコールの「@RenderBody()」で置き換えます。
「</body>」タグを閉じる前にスクリプトRazorセクションを追加します。このセクションは、ページビルダーを使用するビューのためのページ固有のスクリプトを追加するために使用されます。
```
@RenderSection("scripts", required: false)
```

_Layout.cshtmlのコードは次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    @* Dynamically resolves the page's title *@
    <title>Medio Clinic - @ViewBag.Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

    @* Links a stylesheet used by the website. ASP.NET Core automatically searches for static files inside the ~/wwwroot folder. *@
    <link href="~/css/styles.css" rel="stylesheet" type="text/css" />

    @* Razor section for additional page-specific styles *@
    @RenderSection("styles", required: false)
</head>
<body>
    <header>
        <div class="col-sm-offset-3 col-sm-6">
            <div class="col-sm-6">
                <a href="./index.html" title="MedioClinic homepage" class="logo">MEDIO clinic</a>
            </div>
            <div class="col-sm-6 nav">
                <nav>
                    <a href="./index.html" title="Home">Home</a>
                    <a href="./medical-center.html" title="Medical centers">Medical center</a>
                </nav>
            </div>
        </div>
        <div class="clearfix"></div>
    </header>
    @* Loads the content of your Tutorial's pages as sub views *@
    @RenderBody()
    <footer>
        <div class="col-sm-offset-3 col-sm-6">
            <div class="row">
                <div class="col-sm-6">
                    <h4>MEDIO clinic</h4>
                    <ul>
                        <li><i class="fa fa-map-marker"></i> Address: <address>7A Kentico street, Bedford, NH 03110, USA</address></li>
                        <li><i class="fa fa-envelope-o"></i> E-mail: <a href="mailto:info@medio-clinic.com" title="Email us">info@medio-clinic.com</a></li>
                        <li><i class="fa fa-phone"></i> Phone number: <a href="tel:5417543010" title="Phone us">(541) 754-3010</a>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <span class="cms">Powered by <a href="https://xperience.io/" title="Kentico Xperience CMS">Kentico Xperience CMS for ASP.NET Core</a></span>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </footer>
    @* Razor section for additional page-specific scripts *@
    @RenderSection("scripts", required: false)
</body>
</html>

変更を保存します。

これで、あなたのウェブサイトの一貫したレイアウトができました。また、サイトの訪問者に異なる体験を提供したい場合は、すべてのビューの共通レイアウトを一箇所に変更するオプションもあります。

ViewStartファイルの追加

ViewStartファイルを使用すると、各ビューのレンダリングの開始時に実行される共通のRazorコードを定義することができます。これを使用して、_Layout.cshtml をウェブサイト上のすべてのビューのデフォルトレイアウトとして設定します。

Viewsフォルダを選択し、_ViewStartという名前の新しい空のビューを追加します。
デフォルトのコードを以下の Razor マークアップに置き換えてください。
```
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
```
変更を保存します。

これで、あなたのウェブサイトの一貫したレイアウトができました。また、ウェブサイトの訪問者に異なる体験を提供したい場合は、すべてのビューの共通レイアウトを一箇所に変更するオプションもあります。

前のページ： 生成されたページタイプクラスの操作 — 次のページ： ページコンテンツの表示

完成したページ： 7/10

原文：https://docs.xperience.io/13tutorial/asp-net-core-development-tutorial/creating-the-site-layout

Document

サイトレイアウトの作成

以下について説明します

CSSリソースの追加

サイトレイアウトの作成

ViewStartファイルの追加