【Scss】@mixinを利用してFontAwsomeアイコンを疑似要素(:before)で挿入

FontAwsomeを利用すると、Webページ上でWebアイコンフォントを表示することができます。Webアイコンフォントとは、文字と同じように表示できるアイコンのことで、拡大してもぼやけず、色もサイズも簡単に変更できるので非常に便利です。
アイコン挿入方法として、主にHtml内にiタグを貼り付ける方法とCssの疑似要素(:before)を利用して挿入する方法があります。Cssでアイコン挿入のスタイルを作成しますが、Scssの@mixinを利用すると、より便利でわかりやすくアイコン挿入のスタイルを作成することができます。今回は、Scssの@mixinを利用してのFontAwsomeアイコン挿入方法を、サンプルコードを提示しながら説明します。

  1. Fontawsomeとは
  2. Fontawsome5でアイコン表示
  3. 下準備(アコーディオンメニュー作成)
  4. @mixinを利用
続きを読む

【Bootstrap】アコーディオンを利用(メニュー・Table)| コピペ可能

アコーディオンとは、ターゲット要素をクリックし、非表示になっている要素が開閉するWebページなどの表示・操作要素のことです。ユーザーが必要な最低限の情報を表示し、詳細情報を見たい場合のみ任意で表示できるため、よく利用されるユーザーインターフェースの1つです。

今回はBootstrapを利用し、アコーディオンメニューの作成方法とアコーディオンTableの作成方法をサンプルコードを提示しながら説明します。

  1. メニュー作成(下準備)
  2. Bootstrapを利用してアコーディオンメニューに変更
  3. Table作成(下準備)
  4. Bootstrapを利用してTableをアコーディオンにする
続きを読む

【Bootstrap】モーダルウィンドウ作成|コピペ可能

Bootstrapを使用すると、CssやJavaScriptを利用しなくても簡単にモーダルウィンドウを作成することができます。今回は、Bootstrapを利用したモーダルウインドウの作成方法を、サンプルコードを提示しながら説明します。

  1. モーダルウインドウとは
  2. Bootstrapを利用せずにモーダルウィンドウを作成
  3. Bootstrapを利用してモーダルウィンドウを作成
続きを読む

【Css、JavaScript】モーダルウィンドウ作成|コピペ可能

モーダルウィンドウとは、ウィンドウ内で表示された操作を完了するまで(またはキャンセルするまで)他の操作をさせないようにするウィンドウのことです。
モーダルウィンドウは、主にユーザーに重要な操作や確認を促したい時に利用されます。今回は、CssとjQueryでモーダルウィンドウを作成する方法をサンプルコードを提示しながら説明します。

  1. 下準備(Html)
  2. モーダルウィンドウが開いているデザイン作成(Css)
  3. モーダルウィンドウ開閉(jQuery)
続きを読む

disabled属性が設定されている値をSubmitする際の注意点

disabled属性を設定したHTML要素は、無効化されて一切操作できなくなります。disabled属性を設定した要素の値をサーバーにSubmitする際、値がサーバーに送信されないため注意が必要です。input要素の値は編集されたくないけど、サーバーに値を送信する方法をサンプルコードを提示しながら説明していきます。

  1. HTML要素のdisabled属性を有効化
  2. disabled属性の値をPOST
  3. readonly属性
  4. hiddenタグで画面内に埋め込む

※ASP.NET CoreとC#、Bootstrapを利用してコードを作成しています。

続きを読む

【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を利用しています。

続きを読む