これは2005年作成の旧版です。IE7、Firefox、Opera 9、Safari 3（Beta）に対応したフォームにCSS 2007をご覧ください。
フォームにCSSを適用する話の補足。まずは、キャプチャの紹介から。
おすすめ妥協案の表示をキャプチャ (660 by 600 pixels, 31KB)
上から、IE6, Mozilla, Opera, Safari, MacIE5、左から、サンプルファイルの「がんばらない妥協案」、「がんばる妥協案」、「他の妥協案」の順番になっている。Mozilla（Windows版Firefox）とIE6は、Windows XPのXPスタイルのときのものだ。
「がんばらない妥協案」では、ほとんど何もしていない。これを見るかぎりでは、数ピクセルずれたとしても、入力ボックスのほうに少なくともwidthは指定したほうがよさそうに思える。
「がんばる妥協案」は、MacIE5でボックスやボタンが大きくなってしまっているが、それでも枠内には収まっている、というのがポイントだ。今回のようなタイル状のデザインにでもしないかぎり、レイアウトで足を引っ張ることはなくなると思う。
「他の妥協案」は、ADPでいつも書いているwidth/heightとpadding, borderを同時に指定しない、という話そのものだ。表示結果も一番安定している。ちなみに、背景画像は
「他の妥協案」のための背景画像 (220 by 100 pixels, 1.6KB)
のようになっている。ボタン側をいじっていないのは、Safariがデフォルトのボタンデザインのままになってしまうからだ。ボタン側はinputの背景画像だけでそれっぽく見せている。
なお、背景画像でなんでもできる、と思って、丸いボタンにしようと思っても、Operaが勝手にborderをつけてくれるので、はまる。注意されたい。また、ボーダーをなくしたので、画像表示がoffのときにどこがボックスやボタンなのかがわからなくならないよう、背景色の指定は忘れないこと。
あと大事なことは、デザインを変えても入力ボックスっぽい、ボタンぽい、と思ってもらえるよう配慮することだ。本当にその機能を使ってもらいたいならば、デフォルトのデザインをできるだけいじらないほうがいい、とも言える。
フォームの部品をピクセル指定してしまうと、文字サイズの変更についてこなくなる、という問題が生じるが、いちおう、うちにあるFirefoxでは、2段階ぐらいの文字サイズ拡大ぐらいまでならなんとか読める。
テーブルレイアウト全盛のころでも、フォームの位置あわせは難関で、だいたい、余白を適当に作っておく、ぐらいの方法しかなかった。いちおう、今回のネタ、特に「他の妥協案」を使えば、ピクセル単位で狙った位置にフォームを押し込めることができる。少なくとも、今度からこれ使おう、と自分では思っている。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/505
