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

body

HTML の body 要素に対する設定を行います。

body {
  color : #333333;
  background-color: #FFFFFF;
  font-size : 9pt;
  cursor :  auto;
  word-break: break-all;
}

word-break の指定 break-all により、言語に関係なく表示範囲にあわせて改行されます。

.plain

クラス plain を定義しています。 HTML 中では、<p class="plain">といった指定を行うことができます。

.plain {
  color : #333333;
  font-size : 9pt;
}

.content

base_classic2.jspで用意した content に関する表示ルールを規定しています。 ここでは padding 指定のみを行っています。

.content {
  padding-top: 18px;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

.action_table

アクション部に関する CSS です。 クラス action_table では、テーブルのマージンを指定しています。

.action_table {
  margin: 0px;
}

.action_field

アクション部に関する CSS です。 クラス action_field では、ボタンの配置間隔を指定しています。

.action_field {
  text-align: center;
  margin: 0px;
  padding: 2px;
}

.errormsg, .warnmsg, .infomsg

エラーメッセージ部に関する CSS です。 エラーメッセージ、警告メッセージ、インフォメーションは同じ構造となっています。 フォントのサイズや色、囲み枠などを少しずつ変えて対応しています。

.errormsg {
  color : #990000;
  font-size : 14pt;
  line-height: 32px;
  background-color: #FFCCCC;
  width: 90%;
  vertical-align: middle;
  letter-spacing: 1px;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border-top: 2px double #FF9999;
  border-right: 2px double #990000;
  border-bottom: 2px double #990000;
  border-left: 2px double #FF9999;
}

.display_resultcount

クラス display_resultcount は、一覧表示画面における検索結果数の表示方法を示しています。

.display_resultcount {
  text-align : center;
  color: #660000;
  font-size : 11pt;
  padding-bottom : 0px;
}

.display_pagesize

クラス display_pagesize は、一覧表示画面における検索結果数の変更部に関する表示方法を示しています。

.display_pagesize {
  text-align : center;
  color: #660000;
  font-size : 9pt;
  margin-top : 20px;
}

fieldset

Wagbyでは、複数の項目をグルーピング化して表示することができます。 fieldset/legend によるグルーピング表示方式において、fieldset要素は共通で指定しています。 legend要素は、個別の CSS ファイルで指定します。

fieldset {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  border-width: 2px;
}

.display_table

ボディ部に用いられるテーブルには display_table クラス指定を行います。

.display_table {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

その他にも、類似クラスとして .display_table_wide, display_container_table, .display_inner_table, .condition_table が用意されています。

input.field, input.errorfield

一般的な input 要素に対する表示方式を示しています。エラー時の背景色もここで規定しています。

input.field {
  width : 100%;
}

input.errorfield {
  background-color: #FFCCCC;
  width : 100%;
}

input.errorfield_nowidth {
  background-color: #FFCCCC;
}

textarea.errorfield

textarea 要素に対するエラー時の背景色を規定しています。

textarea.errorfield {
  background-color: #FFCCCC;
  width : 100%;
}

textarea.errorfield_nowidth {
  background-color: #FFCCCC;
}

.schedule

カレンダビューにおける各表示ルールは、「schedule_XXX」というクラスにまとめています。

.schedule_normal1 {
  color : #333333;
  background-color: #EEEEEE;
  font-size : 8pt;
}

.schedule_normal2 {
  color : #333333;
  background-color: #E0E8E8;
  font-size : 8pt;
}

.schedule_saturday {
  color : #333333;
  background-color: #99CCFF;
  font-size : 8pt;
}

.schedule_sunday {
  color : #333333;
  background-color: #FF9999;
  font-size : 8pt;
}

.schedule_today {
  color : #333333;
  background-color: #FFFFCC;
  font-size : 8pt;
}

.schedule_hide {
  color : #333333;
  background-color: #DDDDDD;
  font-size : 8pt;
}

.description

説明部に関する CSS 定義です。 「line-break: strict;」は禁則処理を行うという指定です。

.description {
  text-align : left;
  color : #000000;
  font-size : 9pt;
  border-width: 0px;
  padding : 6pt;
  line-break: strict;
  word-break: normal;
}

.note

クラス note, notice, column はメッセージ表示の修飾として用いることができるように準備されています。

.note {　　　　　　
  font-size: 9px;
  line-height: 15px;
  color: #333333;
  padding-left: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-color: #FF3333;
  border-width: 1px 1px 1px 1px;
  border-style: dotted;
  background-color: #FFF0F5;
}

.wrd

フロートウィンドウにおけるヘルプメッセージを実現するクラスです。透明度を設定しています。

.wrd {
  background-color: #dddddd;
  border-top: 1px solid #eeeeee;
  border-right: 1px solid #4c4c4c;
  border-bottom: 1px solid #4c4c4c;
  border-left: 1px solid #eeeeee;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 5px;
  top: 80px;
  left: 0px;
  margin: 5px;
  width: 260px;
  filter:alpha(opacity=85);
  -moz-opacity: 0.85;
  opacity: 0.85;
  line-height: 14px;
  position: absolute;
  font-size: 11px;
  visibility: hidden;
}

各種メニュー定義

メインメニューやサブメニューに関する CSS 定義を行っています。 通常、これらは変更しなくて結構です。