大きさを揃えるには？
各入力フォームの大きさを揃えるのは、非常に簡単です。 スタイルシートの width プロパティと height プロパティを用いて大きさを指定するだけです。
width プロパティも height プロパティも、多くの要素で使用できます。 フォームを構成する input要素や textarea要素も例外ではありません。
スタイルシートでは、大きさを実数値や割合で指定可能です。 例えば、
width: 200px;
と指定すれば、横幅が200ピクセルで表示されますし、
width: 80%;
と指定すれば、親要素（例えばウインドウ幅）の80％の大きさで表示されます。
ピクセルを指定して望み通りの大きさにぴったり揃えることもできますし、 ウインドウ幅に応じて適切な大きさに自動的に変化するようにして、バランスよく配置することも可能です。
実際に記述してみる
それでは、具体的な記述をご紹介致しましょう。
input要素に style属性を加えてスタイルを適用します。
ここでは、横幅を180ピクセル・高さを24ピクセルにしています。
<input type="text" style="width: 180px; height: 24px;" size="21" name="ac"> <input type="password" style="width: 180px; height: 24px;" size="21" name="pw">
これを表示すると、次のようになります。
高さも大きさもそろっていることがお分かりいただけると思います。 代表的な各ブラウザで表示させると次のようになります。
■ Internet Explrer 6.0 :
■ Netscape Navigator 7.01 :
■ Opera 7.02 :
うまくそろっていますね。
注意点
スタイルシートの width プロパティを使ったからといって、size属性を省略するのは望ましくありません。スタイルシートは、どんな環境でもサポートされているとは限りませんし、ユーザが意図的に無効に設定している場合もあります。
スタイルシートが解釈されなくても、極端に使いにくくなったりしないよう、スタイルシートで幅を指定する場合でも、size属性で、だいたいの望ましい幅を指定しておきましょう。
※input要素を使って作る1行入力欄なら、size属性を省略しても、（代表的なブラウザでは）そこそこの幅で表示されますが、 textarea要素で cols属性やrows属性を省略すると、（代表的なブラウザでは）ずいぶんと小さな入力欄になってしまいます。
おわりに
今回は、「ぴったりくっつけたい」シリーズ第3弾として、フォームのサイズを合わせる方法をご紹介致しました。
ぜひ、みなさんのページでもご活用下さい。
【関連記事】
