cssを使ったおしゃれなformのデザイン方法について書いてあるサイトを教えてください。(人力検索はてな)
私の場合、tableの各セルにフォームの各要素を配置していただけでした。『Web2.0的なデザイン』はおろか、普通の外観のフォームをCSSで指定するのは難しかったです。
有用なサイトは回答の中で紹介されていますが、私としてはまずは基本ということで下記のページを参考にしました。
Applying CSS to forms(webcredible)
この記事で説明されているポイントは「label」に対する下記のようなスタイル指定です。
これでラベルの右端とテキストボックスの左端がきれいに揃ったフォームが出来上がります。
なお、上の記事のサンプルコードでは、「submitボタン」に対して直接「margin-left」を指定しているかのように記載されていますが、これではだめです。ページのHTMLソースを覗くと、クラス「submit」を付与した、submitボタンを囲む「p」タグに対して「margin-left」が指定されているのでこの通りにしました。
例えば、このブログだとチェックボックスのある項目があったりして、掲載されているコードをそのまま使うことはできませんが、上記のポイントはおさえて下記のサンプルページのように記述してみました。
いずれにしても「label」に対するスタイル指定の仕方は覚えておくと役に立つと思いました。
