2020年 5月 の投稿一覧

【Css】ヘッダーを上部に固定するレイアウト

ヘッダーが画面上部に固定されているWebサイトをよく見かけます。今回は、上記の図のような、画面をスクロールしてもヘッダーを画面上部に固定させる方法をサンプルコードを提示しながら説明します。

  1. ヘッダーの役割
  2. 下準備
  3. 【Css】position: fixed を利用
  4. 【Css】position: stickyを利用(※2021/01/29 追記)
続きを読む

【Scss】レスポンシブ対応 メディアクエリ

以前のWebサイトは「PCで見られる」ことを前提にレイアウトを作成していましたが、最近はユーザーの環境も変化し、スマホやタブレットでWebサイトを見る人が増加しています。
本来であれば、PCとスマホのレイアウトをそれぞれ(2つ)用意する必要があり、デザイン作成時間が2倍になるため、非常に手間がかかってしまいます。
そんな中、1つのレイアウトでどのウィンドウサイズにも柔軟に対応できる「レスポンシブWebデザイン」が注目を浴びています。
今回は、レイアウトをレスポンシブ対応するために必要不可欠なメディアクエリについて説明していきます。

  1. メディアクエリとは
  2. メディアクエリの基本
  3. メディアクエリをScssで定義
続きを読む

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

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

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

【HTML 】カスタムデータ属性

カスタムデータ属性( data-* )はhtmlのタグに付けるオリジナルの属性です。
データ属性は、似たような要素(id属性やclass属性では区別できない要素)も区別することができ、JavaScriptでdata属性の取得・設定・変更ができるため、非常に便利です。理解を深めるために、JavaScript・css・data属性を利用しながらサンプルコードを作成していきます。

部署IDのカスタムデータ属性を利用し、部署選択ボタンで該当社員行の背景色を動的に変える
  1. data属性とは
  2. data属性の取得・設定・変更(JavaScript、jQueryを使用)
  3. data属性にスタイルを適用させる(Css)

※ボタンやテーブルのデザインは、bootstrapを利用しています。

続きを読む

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

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

【ASP.NET Core】 部分ビュー

各ページで共通利用される部分的なビューを抜き出し、埋め込み可能なビューとして定義することができます。部分ビューを上手く利用することで、コードの重複を減らすことができ、コードの見直しも行いやすくなります。

  1. 部分ビューとは
  2. 部分タグヘルパー
  3. 部分ビューにModelを渡す
続きを読む

【ASP.NET Core】共通レイアウト

ASP.NETアプリの既定レイアウトで、「Views / Shared」フォルダ内にあります。既定レイアウトとはアプリのビューのテンプレートです。どのビューでも(画面を移動しても)常にヘッダーを表示させたい場合など、_Layout.cshtmlを用いてヘッダーを定義することでコードの重複を減らすことができます。

  1. _Layout.cshtmlとは
  2. @RenderBody()
  3. cssファイル読み込み
  4. jsファイル読み込み
  5. 個別でレイアウトを変えたい場合
続きを読む

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

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

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