【ASP.NET Core 】Webアプリの共通レイアウト②(サイドバーをコンテンツ領域の上に重ねる)

  • このエントリーをはてなブックマークに追加
最近はスマホやタブレットの登場により、スマホでも見やすいレイアウト作成が必要不可欠になってきました。【ASP.NET Core 】Webアプリの共通レイアウト①で作成したレイアウトは、スマホで見た場合にコンテンツ領域が非常に狭くなり、見にくくなってしまう問題点があります。今回は、スマホでも見やすいレイアウトにするため、サイドバーを開閉できるレイアウトの作成する方法をサンプルコードを提示しながら説明します。
  1. ヘッダー・サイドバーが常に表示されるレイアウト
  2. サイドバーがコンテンツ領域の上に重なっているレイアウト
  3. サイドバー開閉

 1. ヘッダー・サイドバーが常に表示されるレイアウト作成

ヘッダーとサイドバーが常に表示されているWebアプリの共通レイアウトを_Layout.cshtmlで作成します。下記の記事で作成方法をサンプルコードを提示しながら説明しています。

上記の手順で作成したレイアウトは、PCで見た場合は問題ありませんが、スマホで見た場合にサイドバーが場所を取ってしまい、コンテンツ領域が非常に狭く見にくくなっています。

 2. サイドバーがコンテンツ領域の上に重なっているレイアウト

コンテンツ領域の上にサイドバーを重ねて、サイドバーを開閉するようなレイアウトに変更すれば、スマホで見にくくなる問題を解決することができます。その第一段階として、コンテンツ領域の上にサイドバーが重なるレイアウトに変更していきます。

_Layout.cshtmlはそのまま、cssのみ変更していきます。
div要素をdiv要素の上に重ねるため、position: absolutez-indexを利用します。

●css

イメージは下記のようになります。サイドバーとコンテンツ領域の配置位置を、両要素をまとめる親要素の基準点と同じ位置にします。また、サイドバーをコンテンツ領域の上に重ねるためz-indexを利用します。

上記のようにcssを変更すると、コンテンツ領域の上にサイドバーが重なったレイアウトが作成できます。

 2. サイドバー開閉

コンテンツ領域の上にサイドバーが重なっているレイアウトが作成できましたが、このままではコンテンツ領域の左部分が見えません。そこで、サイドバーを開閉するレイアウトに変更します。まず、サイドバーを開閉するためのボタンを作成します。

●_Header.cshtml

さらに、サイドバーの開閉状態を把握するため、サイドバーとコンテンツ領域の親クラスである”body-content”クラスにデータ属性(data-**)を追加します。

●_Layout.cshtml

サイドバーの開閉をボタンクリック時に変えるため、TypeScriptを利用して、ボタンクリック時に開閉状態を保持しているデータ属性の値を変更します。
データ属性の詳しい説明は、こちらで行っています。

●TypeScript(jQueryを利用)

サイドバーを閉じる場合:data-isopen=”false”に変更
サイドバーを開く場合:data-isopen=”true”に変更

data-isopen=”true”の場合にサイドバーを表示、data-isopen=”false”の場合にサイドバー非表示のレイアウトにするため、cssの変更を行います。37行-45行が追加した部分です。

●css

イメージを図で表すと下記のようになります。サイドバーの幅分(今回であれば200px)左にずらすことで、ボタンクリックでサイドバーを閉じるレイアウトが作成できます。data-isopen=”false”のとき、”left: -サイドバーの幅”と指定することによって、オレンジの点線内のみ見えているのでサイドバーを閉じた状態にすることができます。

cssを変更すると動画のように、開閉ボタンでサイドバーが開閉する(表示・非表示を切り替える)レイアウトが作成できます。

PCの場合はサイドバーとコンテンツ領域を横ならびにするレイアウト、タブレットやスマホの場合はコンテンツ領域の上にサイドバーを重ねるレイアウトを作成する方法は、下記の記事でサンプルコードを提示しながら説明しています。

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

SNSでもご購読できます。

コメントを残す

*