form要素やinput要素にCSSを適用させるおすすめ案の2007年版を紹介する。詳しい説明はフォームにCSS 2007を参照されたい。対象ブラウザをIE6/IE7, Firefox, Opera, Safariとし、IE6は後方互換モードにした上で十分配慮しながら、できるだけきっちりあわせる。
今回のはADP: 検索フォームにCSS（旧版）の改訂版にあたる。旧版の記述が古くなってしまった理由は、ひとつはCSS2.1ではフォームの正しい見た目の制御の仕方が決まっていないからであり、もうひとつは、前回はIE6後方互換モードの見た目に他のブラウザの挙動をあわせてしまったからである。
問題はここでも、入力ボックス（input type="text"）とボタン（input type="button"またはtype="submit"）において、width/heightにborderやpaddingを含めるかどうかが、ブラウザの描画方法によって異なることである。borderやpaddingを含まないほうをcontent-box、含むほうをborder-boxと呼ぶことにする。
border-boxとcontent-box(280 by 176 pixels, 2.5KB)
特に、正しい挙動が決まっていないことは致命的である。Operaはバージョン9で挙動の変更（入力ボックスがborder-boxからcontent-boxへ）が行われたし、Safariの古いバージョンとWindowsのバージョン3（Beta）でも挙動が違う。何が正しいか決まっていないので、変わっても責めることもできない。入力ボックスのほうは、現在は以前にもましてborder-box、content-boxが入り乱れている状況なので、下手にwidthやheightを指定すると、とんでもないことになる。このため、基本的には十分余白をあけて、いじらないほうがいいとされてきた。
でも、デザイン側の要請で、できたらもう少しかっこよくしたい、ピクセル単位できっちりグリッドにおさめたい、と思う制作者もいると思う。なので、現時点でのおすすめ案を2つ提示した。前回の失敗をふまえ、どちらも賞味期限が長くなるように考えてある。
おすすめの第一案は、多くのUAがバージョンがあがるにつれて入力ボックスをcontent-box、ボタンをborder-boxになるようあわせてきているので、それを基本に調整するやり方だ。IE6、IE7、Firefox、Opera、Safari 3（Beta）で大丈夫なことを確認した。このため、コピペでもなんとかなる。おすすめの第二案は、前回同様、border、paddingをゼロにして完全にぴったりあわせるやり方だ。ボタンはtype="image"を使わず背景画像にしているので、:hoverに対応するモダンブラウザではCSSだけでロールオーバーが可能になる。
ここで忘れてはならない注意点を3点挙げる。
第一は、入力ボックスやボタンに見えるようなデザインを心がけることである。あくまで利用者にとってのベストはデフォルトのデザインだが、実際には入力ボックスは高さを合わせようとするだけでデフォルトのデザインを捨てなければならなくなる（ボーダーの幅がブラウザによって異なるため）。違うデザインにする場合は、通常のフォームから逸脱しすぎないようにするバランス感覚が求められる。
第二は、ある程度のボックス、ボタンの大きさを保つことである。余白があったほうが見やすいし、border-boxとcontent-boxとの解釈の違い、フォントサイズの多少の増減にも耐性がつく。
第三は、確認作業を必ず行うことである。border、paddingをゼロにしたところで、デフォルトの見た目を保とうとするブラウザもある。画像表示をoffにしたときに消えてしまっても困る。いつもにもまして念入りにチェックしよう。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/668
