にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

テキスト入力フォームの高さを揃える方法 [フォーム,]

1行のテキスト入力フォームには「何でも入力できるフォーム」と「パスワードを入力させるためのフォーム」があります。前者は、input要素のtype属性に値「text」を指定すれば作れ、後者は、type属性に値「password」を指定すると作れます。どちらも、ウェブ上で各種入力欄を作る際には頻繁に使われているでしょう。

多くの環境では、このテキスト入力フォームもパスワード入力フォームも同じ見た目で表示されます。しかし、WindowsXP以降の環境でIE6以降の場合は、パスワード入力フォームだけが大きめに表示されてしまうことがあります。Windows10のEdgeでは同じに見えるよう戻りましたが、IE11を使った場合は若干大きく描画されます。

入力欄のサイズが一致していないと、なんだかちぐはぐに見えてしまって望ましくありません。入力欄が揃って見えなくなるのを防ぐために、入力欄のサイズはスタイルシートで強制的に幅や高さを指定しておくと良いでしょう。そうすれば、どの入力欄も同じサイズに揃えることができます。例えば、以下のような感じでCSSソースを書きます。

input.userform {
   height: 1.2em;
   width: 10em;
}

上記では、class名として「userform」を付加した入力欄(input要素)に対して、高さを「1.2文字分」・横幅を「10文字分」にしています。高さを「1em(=1文字分)」ちょうどにしてしまうと、入力フォームの枠線や内側の余白などを含めた大きさが1文字分になってしまうので、文字の端が少し切れてしまうことがあります。ですから、ここでは「1.2em」として、少し広めに確保しています。

HTMLソースは以下のように書きます。上記のスタイルシートで指定したサイズに調整して表示したい入力フォームに「userform」というclass名を付加します。

<input type="text" name="a" class="userform" />
<input type="password" name="b" class="userform" />

上記のHTMLソースとCSSソースを合わせて表示させると、以下のように見えます。



ちなみに、スタイルシートを適用しなかった場合は、以下のように見えます。上記と変わらないように見える環境も多いと思います。IEを使ってこのページを表示していれば、違いが分かると思います。



※FirefoxやChrome・Operaなど、IE以外のブラウザでは元々両者は同じサイズに見えます。また、IEの後継であるEdgeでも同じサイズに見えます。さらに、IEであってもWindowsXP以前のバージョンだったり、クラシックスタイルで表示される環境であれば同じサイズに見えるわけですが。

何もスタイルを指定しない状態では、入力フォームが実際に表示される大きさはブラウザによって微妙に異なります。入力フォームを表示するときには、常にスタイルシートで大きさを指定するようにしておく方が良さそうな気がします。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---