画面（フォーム）の見た目をいろいろ変えるには？

質問

お世話になります。
現在稼動中の動的Webサイト
（Javaサーブレット、JSP、CSS、JavaScript、MySQL、CentOS5）があります。

これを、動作（中のロジック）自体は変えずに、
画面（フォーム）の見た目（色ではなくて、各入力項目の形状や配置など）だけを
変えたものを複数作りたいと思っています。

どの部分（JSP、CSS、JavaScript）に対して、
どのような変更をかけると、効率良く、
画面の見た目をいろいろ変えることが出来るのでしょうか？
（定番的な方法などあるのでしょうか？）

以上になります。
ご存知の方がいらっしゃいましたら、ヒントだけでも
ぜひアドバイス願います。
よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

質問への回答は、この前の質問「入力フォーム画面がたくさんある場合 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7128807.html )」とまったく同じになると思います。フォームに限った問題ではありません。
　HTMLのformは、そのままで様々にデザインを変えたいと言うことは、必ず文書自体の目的や構造が異なるわけですから、それに合わせてデザインが変わるようにCSSを書けばよいだけです。もちろん、同じサイトの基本的な部分を変更してしまうとユーザーを混乱させますから共通な部分もあるでしょうし、同じ系列のフォームはテーマが同じになるでしょうし、特定のページについては他と変わるでしょう。
　それを何を基準に変えるかは、あなた自身であって私を含めて誰にもわからないでしょう。

　私がその必要があって行うとしたら、どうするかの例を挙げましょう。formに限りません。
1)サイト全体のデザインの基本は、固定(Preferred)スタイルシートで指定しておきます。
　font-family、font-size、color、background、line-heightなど
2)優先(preferred)スタイルシートで指定します。(代替スタイルシートがあるとき)
　枠線や全体の配置
3)各HTMLで、そのformないし、それの親要素によって判別するセレクタ(選択手段)を書く
　bodyにclass名をつけておくとか
4)各HTMLのヘッダで適用させるスタイルシートを指定する。
　詳細度が同じなら出所と出現順位、詳細度が高ければ優先される
5)各HTMLのヘッダで適用させるスタイルを指定する。
　<link>で指定した後で、記述すると詳細度が同じなら優先される。
6)最終的にはstyle属性で指定する。(詳細度が最大なので)

　これらを、臨機応変にうまく使い分けてください。
詳しくは
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
14.2 HTMLへのスタイル付加 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2 )

お礼

「ORUKA1951」様

ご多忙の中、ありがとうございます。
さっそくご回答内容を今後ベースとして、
実際のカスタマイズに活かしていきます。

私が知りたかった情報が全て凝縮して、
ご回答いただいておりました。
（書店でいろいろな本を読んでも漠然としていたところが、
　 今回のご回答で霧がスッキリと晴れた思いです）
丁寧なご回答、本当にありがとうございました。