前回の命名規約に基づき、実際に使うクラス名を列挙していきます。
- ■ 文字サイズのデフォルトは12pxとします。次のように書けば、Webページ内で使用するほとんどの文字サイズを制御する事ができます。
- body,th,td,input,textarea,select{ font-size: 12px; }
今まで<td class="12text">と書いていた場合もありましたが、今後は記述する必要はありません。 - ■ ページタイトルは通常Webページ内で1回しか表示しないので、ID名（#で始まる）を使います。
- #title { font-size: 15px; }
HTMLには<p id="title">と書きます。 - ■ サブタイトルは複数回表示するので、クラス名を使います。
- .subtitle { margin-top: 1em; }
- ■ デザイン上、文字やボタンの水平方向の位置を制御したい場合
- ・左寄せ
.L { text-align : left; }
・右寄せ
.R { text-align : right; }
・中央寄せ
.C { text-align : center; } - ■ メッセージ
- .Msg { color: #ff9900; }
- ■ エラーメッセージ
- .ErrMsg { color: red; font-weight: bold;}
- ■ 登録フォームなどではtableタグを使用するので、tableタグに関するスタイルも用意しておきます。
- table { border-collapse: collapse; }
th,td { border: 1px #333333 solid; } - ■ 項目名（一般）
- th { background-color: #cccccc; font-weight: normal; text-align: left; }
※ HTML側のthタグには特に何も指定しません。 - ■ 項目名（主キー、IDなど）
- th.ThKey01 { background-color: #ff9900; }
※ 主キーなどの項目には、HTML側のthタグにThKey01を指定します。
例）<th class="ThKey01"> - ■ 入力欄（主キー、IDなど）
- td.TdKey01 { background-color: #eeeeee; }
例）<td class="TdKey01">
次回は入力画面、明細画面に特化したクラス名を説明します。
