当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
同意しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。詳細はこちらから
お問い合わせ 無料トライアル

Document

ドキュメント

ウェブサイトのレイアウトを作成する

最終更新日:

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

以下について説明します：

  • CSSリソースの追加

  • サイトレイアウトの作成

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

このチュートリアルでは、Xperience サイトのフロントエンドとして機能するライブサイト MVC アプリケーションの設計に焦点を当てます。このセクションでは、Xperience API を使用した MVC 5 の開発を中心に、プロセスをできるだけスムーズにするための方法を説明します。

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

CSSリソースの追加

Medioクリニックのウェブサイトの基本的なデザインは、チュートリアルリソース内のstyles.cssファイルのCSSスタイルに依存しています（リソースはこちらからダウンロードできます：TutorialWebsite.zip）。デザイン関連のリソースは、MVCアプリケーション内の他のコードとは別に保管することをお勧めします。

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

  1. Visual Studio で、MEDIOClinic プロジェクトの Content フォルダにチュートリアル リソースの styles.css ファイルを追加して、必要なスタイルを追加します。

  2. App_Start/BundleConfig.cs ファイルを開き、RegisterBundles メソッドを編集します。

    • あなたのMVCアプリケーションがベースになっているプロジェクトテンプレートには、CSSファイルとJavaScriptファイルをバンドルするために使用される2つのバンドルが含まれています。このチュートリアルでは、CSS バンドルのみを扱います。JavaScript バンドルは無視しても大丈夫です。

  3. styles.css ファイルを "~/Content/css" バンドルに追加します。RegisterBundlesメソッドは以下のようになっているはずです。


public static void RegisterBundles(BundleCollection bundles)
{
    // Custom JavaScript files from the ~/Scripts/ directory can be included as well
    bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
                "~/Scripts/site.js"));
​
    // Custom CSS files from the ~/Content/ directory can be included as well
    bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/site.css",
                "~/Content/styles.css"));
}

スタイルとスクリプトのバンドルを使用して、サイトのスタイルとスクリプトファイルの全体的なサイズを減らし、各ページの読み込み時にサーバーに送られるリクエストの数を最小限に抑えます。バンドルの詳細については、Microsoft の公式ドキュメントポータルを参照してください(Bundling and minification)。

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

サイトレイアウトの作成

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

  1. Visual Studioで、Views/Shared/Layout.cshtmlを開きます。

  2. Layout.cshtml内のコードを、チュートリアルリソースのindex.htmlファイル内のサンプルコードに置き換えます（リソースはこちらからダウンロードできます：TutorialWebsite.zip）。

  3. 「<title>...</title>」タグを見つけて、ハードコードされたページタイトル "Tutorial website"を Medio Clinic~接頭辞とRazorコール「@ViewBag.Title」で置き換えます。

  4. 「<head>」タグの中にサイトのstyles.cssファイルを含むスタイルバンドルをレンダリングします。

    
@Styles.Render("~/Content/css")

  5. 「</head>」タグを閉じる前にスタイルRazorセクションを追加します。このセクションは、ページビルダーを使用するビューのためのページ固有のスタイルシートを追加するために使用されます。

    
@RenderSection("styles", required: false)

  6. 閉じている「</header>」タグと開いている「<footer>」タグの間のコンテンツを削除し、Razor コール 「@RenderBody() 」で置き換えます。

  7. 閉じている「</body>」タグの前に、スクリプトのRazorセクションを追加します。このセクションは、ページビルダーを使用するビューのためのページ固有のスクリプトを追加するために使用されます。

    
@RenderSection("scripts", required: false)

  8. 最終的に、 _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="http://fonts.googleapis.com/css?family=Lato:400,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
​
    @* Loads the styles.css resource *@
    @Styles.Render("~/Content/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="http://www.kentico.com" title="Kentico Xperience">Kentico Xperience for ASP.NET</a></span>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </footer>
​
    @* Razor section for additional page-specific scripts *@
    @RenderSection("scripts", required: false)
</body>
</html>

  9. 変更を保存します。

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

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

完成したページ： 10の7