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 追記】Edge の場合

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

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

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

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

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

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

このブログの運営者

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

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

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

最近のエントリー

Switch の画面がオレンジになって動かなくなった場合の対処法の1つ!セーブデータを保持したまま本体を初期化する!

プラグインを使わず WordPress の投稿ページで PHP の外部ファイルを呼び出す方法

Feedly ボタンが機能していない?!正しい URL の情報に変更する方法

Twitter で過去のツイートを閲覧・削除する方法

赤ちゃんが泣き止む動画「ふかふかかふかのうた」は生後3ヶ月の赤ちゃんにも効果抜群だった!

これで迷わない!東京ディズニーランドの喫煙所マップ一覧【写真付き】

iTunes でアートワークが反映されないのは WAV 形式が原因!AAC に変換すれば反映される!

【徹底比較】WiMAX 2+ ギガ放題プランの最安値はどこ?【2017年10月版】

おすすめのモバイルルーター・ポケット WiFi を比較!選ぶポイントは利用目的に合わせること!

公共料金の支払いはクレジットカードと口座振替のどっちがお得?