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文字あたりの横幅は異なるので、サイズを指定する場合は、少し余裕を持たせて定義すると良いでしょう。

2017/01/17

青色申告の申請書「所得税の青色申告承認申請書」の書き方!例にならって入力すれば簡単に作成できる

2017/01/16

個人事業の開業届の書き方!例にならって入力すれば簡単に作成できる

2017/01/14

Nintendo Switch のコントローラーの充電方法は?標準の Joy-Con グリップでは充電できないので注意!

2017/01/14

Nintendo Switch の本体容量は 32GB しかない!容量追加はマイクロSDカードを利用する

2017/01/13

スプラトゥーン2の発売日は2017年夏で決定!

2017/01/13

Nintendo Switch 発売日決定!詳細はいかに?

2017/01/13

Windows 10 の PDF を起動するアプリを設定する方法

2017/01/13

Windows で拡張子を表示させる方法!拡張子が分かればファイルの種類が判別できる

2017/01/12

開業届や青色申告の申請書の PDF はパソコンから入力することができる

2017/01/12

Adobe Acrobat Reader DC インストール手順!ダウンロード時の選択肢を間違えないようにしましょう

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑