【ASP.NET Core 】 Webアプリの共通レイアウト① (ヘッダー・サイドバー)

  • このエントリーをはてなブックマークに追加

_Layout.cshtmlと部分ビュー、さらにcssを利用し、Webアプリ共通のデザインを定義します。Webアプリでよく見られるヘッダーとサイドバーが常に表示されているレイアウトを、サンプルコードを提示しながら以下の手順で作成します。

  1. _Layout.cshtmlとは
  2. 部分ビューとは
  3. ヘッダー作成
  4. サイドバー作成
  5. 共通レイアウト作成

 1. _Layout.cshtml

_Layout.cshtmlとは、ASP.NET Coreで作成するWebアプリの既定レイアウトを定義するためのファイルで、「Views > Shared」フォルダの中にあります。
既定レイアウトとはビューのテンプレートのことで、どのビューに遷移しても変わらない共通的なデザインのことです。常にヘッダーを表示させたい場合など、_Layout.cshtmlを利用すればコードの重複を減らすことができます。

_Layout.cshtmlの詳しい説明は下記の記事で行っています。

 2. 部分ビュー

各ページで共通的に利用される部分的なビューは、抜き出し・埋め込み可能なビューとして定義することができます。部分ビューを上手く活用することで、コードの重複を減らすことができ、さらに保守しやすいコードが作成できます。

部分ビューの詳しい説明はこちらの記事で行っています。

 3. ヘッダー作成

Webアプリ内で共通的に表示するヘッダーを作成していきます。

● _Header.cshtml

● css(スタイル)

※Bootstrapを使用すれば、cssを自分で作成しなくても簡単にヘッダーナビゲーションが作成できます。

 4. サイドバー作成

Webアプリ内で共通的に表示するサイドバーを作成していきます。

● _Side.cshtml

● css(スタイル適用)

 5. 共通レイアウトを作成

作成した部分ビュー_Header.cshtmlと_Side.cshmlを、_Layout.cshtml内で部分ダグヘルパーを用いて埋め込みます。_Header.cshtmlと_Side.cshmlは_Layout.cshtmlと同じフォルダ内に作成しました。

●_Layout.cshtml

★Point

ヘッダーの下にサイドバーをコンテンツ領域と横並びで配置するため、_Side.cshmlは”body-content”クラス内に含める必要があります。

しかし、このままではサイドバーもコンテンツ領域もブロック要素なので、コンテンツ領域がサイドバーの下に配置されてしまいます。

サイドバーとコンテンツ領域を横並びで配置するため、2つの要素をまとめている親クラス”body-content”にdisplay: flexを指定します。

display: flex


div要素(ブロック要素)を横並びに配置する際、floatを利用していましたが、回り込みが起きてしまうなど利用しにくい点がありました。Css3から導入されたflexボックスを利用することにより、簡単にレイアウトを作成することができます。

●css

フレックスボックスを利用することで、サイドバーとコンテンツ領域を横並びに変更することができました。

現段階で問題が2点残っています。
 ・コンテンツ領域の幅
 ・サイドバーもコンテンツ領域も一緒にスクロールされてしまう
以上の問題を解決するため、さらにcssの変更をしていきます。

●css

画面全体のスクロールを非表示にし、「.main-content」にのみスクロールを表示するように変更したため、ヘッダーを上部固定にするスタイル「position: fixed;」が不要になりました。よって、cssを以下のように変更します。

●css

_Layout.cshtmlを利用した、ヘッダー・サイドバーが表示されている共通デザインの作成が完了しました。

作成した上記のレイアウトはスマホで見た場合、コンテンツ領域が非常に狭くなる問題点があります。
以下の記事で、コンテンツ領域の上にサイドバーを重ねるレイアウトに変更する方法をサンプルコードを提示しながら説明しています。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*