Input タグ Text ボックスの size 属性はブラウザにより解釈が異なるので注意

2015/07/20

HTML の Input タグで利用できる size 属性は、Input のコントロールに表示する文字数を定義する属性として用意されています。しかし日本語の場合、半角文字と全角文字が混在しているため、同じ 1文字でも文字の横幅が異なります。

単にサイズ違いで済むのであれば、簡単に調整できると思うのですが、残念ながらブラウザにより size 属性の解釈が異なるため、想定していたイメージ通りになりません。

ブラウザ別 size 属性の表示イメージ

具体的に各ブラウザの表示イメージをご覧ください。Chrome、Internet Explorer 11、Fire Fox で表示してみました。

input-text-size-attribute01

上記の例はテキストボックス (type="text") に、それぞれ size 属性を定義したものです。フォントの指定をしていないので、Windows 上でのブラウザ標準状態での表示イメージとなります。

比べてみても、何を基準にサイズが決められているのかよくわからない と言うのが正直なところです。半角に合っているようにも見えますが、Fire Fox では size="20" の場合にはみだしてしまっています。


【2015.8.9 追記】
Windows 10 からの標準ブラウザ Microsoft Edge で表示した場合、Internet Explorer 11 と同じ表示イメージとなりました。

テキストボックスのサイズは width スタイルを指定しよう

各ブラウザで解釈が異なる属性を利用するのは、あまり好ましくありません。このような場合は、size 属性を利用せずに、スタイルシートでピクセル指定すると良いでしょう。

次のように style 属性を利用して直書きするか、またはクラス指定して別途スタイルシート定義する方法があります。

<input type="text" style="width:200px;" />

これでテキストボックスのサイズは、ブラウザ間で同じように表示することができます。ただ、フォントによって 1文字あたりの横幅は異なるので、サイズを指定する場合は、少し余裕を持たせて定義すると良いでしょう。

Name :
気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑