人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLのinputタグのsize属性の値の算出法がよく分かりません。
<input type='text' name='code' size='16' maxlength='12' value='AAAAAAAAAAAA'>
のようにmaxlengthで12を指定したテキストボックスに、12文字ちょうど入力した際、適切な横幅を得る(ボックス内がスクロールせず、文字列が全て見える)ためににはsizeの値をどのように算出すればよいでしょうか。「size=文字数」と書いているサイトは多いですが、12だとアウトですよね。よろしくお願いします。(ブラウザ依存ならIEが特に知りたいです)

●質問者: medeski_001
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML IE サイト スクロール タグ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● mzk
●35ポイント

これ完璧に合わせるのは難しいかも・・・。

デフォルトのフォント(WindowsならMS UI Gothicかな?)はプロポーショナルフォントと呼ばれる物で、文字によって幅が違います。

たとえば「i」を12個を並べても半分ぐらいしか埋まりません。


sizeの言う1文字の幅はi最短から最長までの中間値か平均値なので、「maxlength×3÷4=size」とすると大体改善されるんじゃないでしょうか?

◎質問者からの返答

なるほど。

「zeの言う1文字の幅は最短から最長までの中間値か平均値」といっても、size=maxlengthだと「A」でもはみ出すので半角の中間値・平均値あたりでしょうかね。

「maxlength×3÷4=size」って減ってるじゃないデスか!「maxlength×4÷3=size」でも幅が足りないです・・・

半角「A」なら「maxlength×1.5=size」

全角「あ」なら「maxlength×2+1=size」

くらい?


2 ● mzk
●35ポイント

すみません。。。計算式で書きたかったのはmax×4÷3です。。。

それもでだめっぽいですね。。。


多分半角文字だと「W」が一番幅を取ります。

MS UI Gothicで12文字表示するのに最適なサイズは"22"。

1文字あたりのsizeが1.8333....なので、size=max×1.8?9を適応すれば大丈夫そうです。

このサイズなら全角でも12文字入るようです。

◎質問者からの返答

なるほど、「W」を基準にするとよさそうですね


3 ● itochan(正直公正)
●10ポイント

スタイルシートを利用するのは不可なのでしょうか?

<input type='text' name='code' size='16' maxlength='12' value='AAAAAAAAAAAA' style="width:200px;">

ピクセル単位で指定できます。

当然ですが、font-family、またfont-sizeの指定なども視野に入れないといけないと思います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ