Webシステムで売上情報や日次報告などを入力する場合、
を用い、情報を入力していきます、ということを【HTML編】第2回 入力関連のTipsで書きました。これらのフォームオブジェクトの見た目を制御する為には、次のクラスを使います。
- フォームオブジェクトのデフォルトは、英数字のみ入力できることとします。
- input { ime-mode: disabled }
- 日本語を入力する項目にのみ、日本語モードONにします。
- .InputJa { ime-mode: active }
例） 住所：<input type="text" class="InputJa" value="新宿"> - 金額、数値は右寄せ。
- .InputNum { text-align: right; }
- 必須入力の項目は分かりやすいように背景色を付けます。
- .InputReq { background-color: #a1f7af; }
予算実績一覧などの明細を表示する場合、次のクラスを使うこととします。
- 明細の項目名。tableで一覧などを表示する場合、項目は常にHTMLのthタグを使います。
- th.ThM { background-color: #cccccc; text-align: center; }
- 明細（奇数行）
- tr.TrM01 { background-color: #ffffff; }
- 明細（偶数行）
- tr.TrM02 { background-color: #eeeeee }
ページをモニタの解像度に収めるために（縦スクロールを出さないようにするために）、CSSのoverflowというスタイルを使って、明細部分だけがスクロールする方法もあります。
具体的な記述の仕方はグラフィックデザイン部のblogを参照してください。
