CSSのカスタマイズ

最終更新日: 2023年3月20日
R8 | R9

変更するファイル

Wagbyに同梱されているCSSファイルを上書きするのではなく、「追加ファイル」を用意する方法を提供しています。これを使って標準の動作を変更することができます。

変更する範囲開発者が作成するファイル保存フォルダ (*1)
アプリケーション全体mycommon.csscustomize\webapp\css
モデル単位My.csscustomize\webapp\<モデルID>
画面単位My<画面識別子>.css (*2)customize\webapp\<モデルID>
システム管理system\My.csscustomize\webapp\system
スマートフォン mymobile.csscustomize\webapp\css
1. インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身で必要なフォルダの作成を行ってください。
2. 画面識別子は "画面種別" + "モデルID" の組み合わせです。SCREENID 関数の戻り値になります。

CSSファイルの適用ルール

CSSファイルの読み込み順は次のようになります。同じ設定があった場合、後に読み込まれた設定に上書きされます。これによって適用範囲を限定したカスタマイズが行えるようになっています。

  1. (製品に同梱されている)標準の common.css
  2. mycommon.css
  3. <モデルID>/My.css
  4. My<画面識別子>.css

管理処理タブ内のモデルの扱い

管理処理など、以下の画面については system/My.css が共通で適用されます。作成した My.css を customize\webapp\system/My.css として保存してください。

  • メニュー
  • 管理処理 - インポートとエクスポート,統計情報,システムログ閲覧,このアプリケーションについて,オンラインライセンス認証,ログオンユーザ管理,メンテナンスモード切り替え
  • 共通処理 - プレファレンス

テーマごとのカスタマイズ

カスタマイズしたファイル (例 mycommon.css) に記載した内容は、どのテーマ (claro,soria,tundra,nihilo) にも適用されます。テーマ毎に指定したい場合は、wagbydesigner\bin\webpage\css 内のテーマ別ファイルを直接、修正してください。

注意

Wagby のバージョンアップ時は、開発者はこの修正を（バージョンアップしたWagbyにも）適用してください。

制約

例 ページタイトルの背景色を変更する

model1のページタイトルを変更する

model1 のすべての画面に反映させる場合は customize\webapp\model1\My.css を用意します。 

.pagetitle {
  border-left: 10px solid #6BBF3F;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#95FF65",endColorstr="#FFFFFF");
  background: -webkit-linear-gradient(left, #95FF65, #FFFFFF);
  background: -moz-linear-gradient(right, #95FF65, #FFFFFF);
  background: -ms-linear-gradient(right, #95FF65, #FFFFFF);
  background: -o-linear-gradient(right, #95FF65, #FFFFFF);
  background: linear-gradient(to right, #95FF65, #FFFFFF);
}

model1の登録画面のページタイトルを変更する

画面を限定させる場合は画面識別子を指定します。登録画面は Insert とモデルIDで表現します。customize\webapp\model1\MyInsertModel1.css を用意します。 

.pagetitle {
  border-left: 10px solid #CC0000;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#FF2819",endColorstr="#FFFFFF");
  background: -webkit-linear-gradient(left, #FF2819, #FFFFFF);
  background: -moz-linear-gradient(right, #FF2819, #FFFFFF);
  background: -ms-linear-gradient(right, #FF2819, #FFFFFF);
  background: -o-linear-gradient(right, #FF2819, #FFFFFF);
  background: linear-gradient(to right, #FF2819, #FFFFFF);
}

model1の更新画面のページタイトルを変更する

更新画面は Update とモデル ID で表現した画面識別子を使います。customize\webapp\model1\MyUpdateModel1.css を用意します。 

.pagetitle {
  border-left: 10px solid #E49B0F;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#FBE731",endColorstr="#FFFFFF");
  background: -webkit-linear-gradient(left, #FBE731, #FFFFFF);
  background: -moz-linear-gradient(right, #FBE731, #FFFFFF);
  background: -ms-linear-gradient(right, #FBE731, #FFFFFF);
  background: -o-linear-gradient(right, #FBE731, #FFFFFF);
  background: linear-gradient(to right, #FBE731, #FFFFFF);
}

対象の指定方法

この例では ".pagetitle" と指定しています。これは CSS のクラス属性となっており、実際の HTML では <div class="pagetitle" id="...">の部分に相当します。Wagbyが生成した HTML ソースを確認することで、どの表示にどのクラス属性が設定されているかを直接、確認することができます。

クラス属性指定ではなく、HTML 要素を直接、記述することもできます。例えば body { background: lightgray; } とすることで、ページ全体の背景色がグレーに変更されます。

例 フォーカスセット時に背景色と入力欄を囲む枠を表示する

テキストボックス、日付ドロップダウンカレンダ、リストボックス、テキストエリアにフォーカスがセットされた時に背景色と入力欄を囲む枠を表示することができます。 

@charset "UTF-8";
div.dijitTextBoxFocused.dijitTextBox,
table.dijitSelectFocused.dijitSelect,
textarea.dijitTextBoxFocused.dijitTextBox {
 /* 背景色を変える */
 background: #FFF8DC;
 /* 入力欄を囲む枠を表示する */
 outline: 3px solid #CBE6F3;
}
.soria table.dijitSelectFocused.dijitSelect > tbody > tr > td.dijitReset.dijitStretch.dijitButtonContents,
.tundra table.dijitSelectFocused.dijitSelect > tbody > tr > td.dijitReset.dijitStretch.dijitButtonContents,
.nihilo table.dijitSelectFocused.dijitSelect > tbody > tr > td.dijitReset.dijitStretch.dijitButtonContents 
{
  /* リストボックスの背景色を変える */
  background: #FFF8DC;
}

CSS テーマ soria, tundra, nihilo はリストボックスのテーブルに背景画像が設定されているため、その対応を行っています。

例 一覧表示の項目間を黒色にする

CSS によって罫線の色を変更することができます。

図1 項目間の色を変更した例
@charset "UTF-8";
.display_label_list:first-child
{
  border-style:none;
}
.display_label_list
{
  border-style:solid;
  border-width:0px 0px 0px 1px;
  border-color:#000;
}
.display_field_list td:first-child,
.display_field2_list td:first-child,
.display_field_list_selected td:first-child,
.display_field2_list_selected td:first-child
{
  border-style:none;
}
.display_field_list td,
.display_field2_list td,
.display_field_list_selected td,
.display_field2_list_selected td
{
  border-style:solid;
  border-width:0px 0px 0px 1px;
  border-color:#000;
}

例 モダンカレンダビューの文字サイズを固定する

Wagbyの文字フォントサイズを「大きいフォントサイズ」にすると、モダンカレンダビューの日付とカレンダデータが重なって表示される場合があります。これを防ぐため、モダンカレンダビューに表示される文字（タイトル部をマウスで押下した時に表示されるダイアログを含む）のサイズを固定する設定を示します。

この設定は mycommon.css に用意します。 

div.dojoxCalendar *,
#jfcCalendarItemDialog *,
#jfcCalendarViewMiniCalendar * {
  font-size: small;
}

スマートフォン向けCSSの変更

ボタンのラベルの文字サイズ

1.1倍の文字サイズに変更する例です。 

.mblButton,
.mblToolBarButtonLabel,
.mblToolBarButton {
font-size: 1.1em;
}

テキスト入力欄のサイズ

1.5倍の文字サイズに変更する例です。 

.dijitInputField {
font-size: 1.5em;
}

任意のCSSを追加する

開発者が独自に用意した CSS ファイルを読み込ませることができます。

変更する範囲開発者が修正するファイル
アプリケーション全体customize\webapp\tiles2-base_classic2.jsp
画面単位customize\webapp\<モデルID>\<画面識別子><モデルID>_javascript.jsp

例 すべての画面で任意のCSSファイルを読み込ませる

wagbyapp\webapp\$APPNAME\tiles2-base_classic2.jspを修正します。このファイルは先頭でさまざまなCSSファイル読み込みを行なってるので、そこに開発者が（読み込みの処理を）挿入します。挿入位置は任意に決めてください。

具体的には、独自で開発した CSS ファイルを読み込むためのscriptタグを指定します。