サポート > Wagby Developer Network > 見栄えのカスタマイズ > CSS の解説 (2)

.pagetitle

pagetitle クラスは、画面内に用意されたページタイトル部で用いられます。

.pagetitle {
  height: 28px;
  color:#61563B;
  background-color: #D1E2FF;
  text-indent: 6px;
  margin-top: 0px;
  text-align: left;
  margin-bottom: 16px;
  padding-top: 10px;
  padding-left: 12px;
  border-left: 12px solid #046380;
}

サブウィンドウ検索の場合は、.pagetitle_plainクラスが用いられます。

.pagetitle_plain

サブウィンドウ検索用に用いられます。

.pagetitle_plain {
  text-align: center;
  margin-right: 0px;
  padding-right: 0px;
  color: #406B9B;
  background-color: #EFECCA;
}

.pankuzu

パンくず部で用いられます。

.pankuzu {
  text-align: left;
  padding-top: 4px;
  padding-left: 10px;
  padding-bottom: 4px;
  clear: both;
  background-color: #F0F4FC;
  visibility: hidden;
  _font-size: x-small; /* for IE */
}

.logonuserinfo

ログオンユーザ部に関する CSS です。 border-top の色が各ファイル毎に異なります。

.logonuserinfo {
  text-align: right;
  color: #8BA0BD;
  margin-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-top: solid 2px #ACC5E2;
  background-color: #FFFFFF;
}

.related_model

外部キーによる連携において、連携先モデルを示す表現を規定しています。

.related_model {
  text-align: left;
  text-indent: 20px;
  line-height: 31px;
  color: #406B9B;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 5px;
  border-width: 0px 0px 1px 18px;
  border-style: solid;
  background: #FFFFFF;
}

.table_title

一覧表示画面における見出し（「一覧表示」）などで用いられます。

.table_title {
  padding: 0.5em;
  color : #5E8EAB;
  background-color: #FFFFFF;
}

.display_label

項目のラベル部分表示に関する規定を行います。

.display_label,
.display_label_nowrap,
.display_label_notnull,
.display_label_nowrap_notnull,
.display_label_readonly,
.display_label_nowrap_readonly,
.display_label_notnull_readonly,
.display_label_nowrap_notnull_readonly {
  text-align: center;
  color: #000066;
  background-color: #B9CBF1;
  _font-size: x-small; /* for IE */
  padding: 4pt;
}

実際には、さらに Wagby 定義ファイルの内容に応じて「_nowrap」「_notnull」「_readonly」といった修飾が行われます。

.display_field

項目の値部分表示に関する規定を行います。

.display_field,
.display_field_noalign,
.display_field_right,
.display_field_center,
.display_field2,
.display_field2_noalign,
.display_field2_right,
.display_field2_center,
.display_field_selected,
.display_field_right_selected,
.display_field_center_selected {
  text-align : left;
  color : #0000A0;
  background-color: #F0F4FC;
  _font-size: x-small; /* for IE */
  border-width: 0px;
  line-break: strict;
  word-break: normal;
}

実際には、さらに Wagby 定義ファイルの内容に応じて「_noalign」「_right」「_center」といった修飾が行われます。

.button_field

検索画面におけるボタン表示部の定義を行います。

.button_field {
  text-align : center;
  background-color: #91B4E5;
}

A, A:VISITED, A:HOVER, A:ACTIVE

アンカーは CSS の疑似クラス指定を用いて定義しています。 ":VISITED" は、訪れたリンクを、":HOVER" はリンク上にマウスカーソルをあてたことを、":ACTIVE" はリンクをクリックしたことをそれぞれ表します。

A {
  color : #FF6600;
  text-decoration : none;
}

A:VISITED {
  color : #FF6600;
}

A:HOVER {
  color : #990000;
  text-decoration : underline;
}

A:ACTIVE {
  color : #FF6600;
}