【ASP.NET Core 】Webアプリの共通レイアウト③(媒体でレイアウト変更)

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

最近はWebアプリをスマホやタブレットでも見れるように「レスポンシブWebデザイン」の対応が必要不可欠になっていきました。ウィンドウサイズによって適用するスタイルを変えられるCssのメディアクエリを利用し、スマホやPC、どちらでも見やすいレイアウトを作成していきます。

【ASP.NET Core 】Webアプリの共通レイアウト①【ASP.NET Core 】Webアプリの共通レイアウト②で作成したレイアウトをメデイアクエリを利用して修正し、スマホやPC、どちらでも見やすいレイアウトに変更していきます。
  1. ヘッダーとサイドバーが表示されているレイアウト作成
  2. メディアクエリとは
  3. レスポンシブWebデザイン作成

 1. ヘッダーとサイドバーが表示されているレイアウト作成

ヘッダーとサイドバーが常に表示されているレイアウトの作成手順は、下記の記事で説明しています。

サイドバーをコンテンツ領域の上に重ねて開閉できるように変更したモバイル向けのレイアウトの作成手順は、下記の記事で説明しています。

 2. メディアクエリとは

ユーザーがどの端末でアクセスしているかをディスプレイの幅から判断し、Cssを利用することで、大きいディスプレイと小さいディスプレイでの見え方を変えるようにしたのがメデイアクエリです。

●cssの例

メディアクエリはScssを利用すると、見やすく書くことができます。
Scssでメディアクエリを記述する方法はこちらの記事で説明しています。

 3. レスポンシブWebデザイン作成

1. レイアウトで作成したレイアウトをメディアクエリを使用して、PC:サイドバーが常に表示されているレイアウト、タブレット:サイドバーが開閉できるレイアウトに変更します。

●css(メディアクエリを利用)

1 – 34行目は、どのウィンドウサイズでも適用され、37 – 64行目はウィンドウサイズ768px以下の場合のみ適用されます。
レスポンシブ対応したレイアウトは、以下のようになります。左側がPCで見た時のレイアウト、右側がタブレット・スマホで見た時のレイアウトです。

Cssのメデイアクエリを利用することで、簡単にレスポンシブ対応されたWebアプリを作成することができます。

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

SNSでもご購読できます。

コメントを残す

*