ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

フォームの大きさを揃える方法

フォームを作成する際に、フォームの大きさの指定方法が曖昧で困った経験はありませんか?フォームの入力欄のサイズを、ぴったり望み通りの大きさで表示する方法をご紹介致しましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

フォームも細かくデザインしたい

フォームを作成する際に、フォームの大きさの指定方法が曖昧で困った経験はありませんか? 例えば、input要素の場合は幅を「size属性」で指定します。ここで指定する数値は、ピクセル数ではなく文字数です。(下記の例では「60」)

<input type="text" size="60" ...>

文字数での指定だと、表示に必要な幅は閲覧者の文字サイズによって異なってしまいます。 また、ブラウザによって解釈が微妙に異なるため、必ずしも製作者が望んだ通りの幅で表示されるとは限りません。

また、Internet Explorerで表示させた場合、パスワード用の入力欄と、通常の入力欄とでは、同じようにsize属性を指定しても大きさが揃いません。(下図参照)

Internet Explorer 6.0 で表示させたところ

「普通の1行入力フォーム」と比較すると、「パスワード入力フォーム」は幅も高さも大きくなってしまいます。 この大きさを揃えたいと思うこともあるでしょう。

そこで今回は、フォームの大きさを望み通りにぴったり指定する方法をご紹介致します。

各ブラウザの表示

さて、次のような入力フォームを考えてみましょう。

アカウント:
パスワード:

このHTMLソースは、次のようになります。

<form action="***">
アカウント:<input type="text" size="21" name="ac">
パスワード:<input type="password" size="21" name="pw">
</form>

上記で記述している「size属性」がフォームの横幅を指定しています。
値が「21」となっていますが、これは「21ピクセル」という意味ではありません。「21文字」という意味になります。(高さを指定する属性はありません。)

このフォームを代表的な各ブラウザで表示させてみると、次のようになります。
※どれもOSは、Windows XPを用いた場合です。(他のOSを使用した場合は、見え方が異なる場合があります。)

 Internet Explrer 6.0 :
Internet Explorer 6.0 で表示させたところ

 Netscape Navigator 7.01 :
Netscape Navigator 7.01 で表示させたところ

 Opera 7.02 :
Opera 7.02 で表示させたところ

ご覧のように、ずいぶんと表示が異なることがお分かりいただけると思います。 これを同じように表示されるようにしてみましょう。

それでは、次のページへ →

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます