input size はブラウザによる幅の違いが生まれる

2010年09月22日UP
  • このエントリーをはてなブックマークに追加

この記事は2010年9月に書かれたものになります。
2015年4月版 input size について
という続記事を書きましたのでそちらも参考にしてください。


多くの方は<input size=”30″ />のように入力欄inputのサイズはsize属性で指定をしていると思います。

ASPのサンプルフォームなどは必ずと言っていいほどこのように指定していますので、当たり前と言っては当たり前です。

ですが、この指定の仕方はちょっとした欠点があります。

それは、
ブラウザによってサイズが異なってくる
ということです。

そもそもこのsize=””で指定しているサイズは、pxなどのように「入力欄の幅の指数」を決めているのではなく「半角文字での文字数の収まる範囲」を決めているのです。

つまりどういう事かと言いますと、例えば「size=”30″」という指定は、「半角文字数が”30文字”収まる幅」に設定されている」というわけです。

ここに問題があります。

それは、ユーザーのブラウザ環境によって左右されるということです。

ブラウザとはIE(Internet Explorer)やFirefoxなどのWEBサイトを観覧するためのソフトのことを言います。(ただしくはウェブブラウザと言います。)

  • あなたのサイトに訪れたユーザーは、あなたと同じブラウザを使用しているとは限りません。
  • あなたのサイトに訪れたユーザーは、あなたがサイト制作時に確認しているブラウザを使用しているとは限りません。
  • あなたのサイトに訪れたユーザーは、Macintoshを使用しているかWindowsを使用しているかはわかりません。

これらのことを考慮しますと、どのブラウザで見ても同じように表現するには「input size=””」を使用するのではなく、「style=”width: 000px;”」というスタイルシートを適応させる記述をする必要があります

実際にどの程度違うのか、12のブラウザでスクリーンショットをとってみましたので一気にご覧ください。(画像になりますので、実際に入力することは出来ません。)
※ ここでは、『input size=”34″』と『style=”width: 200px;”』を比べてみました。


Windows IE8
WindowsIE8

Windows IE7
WindowsIE7

Windows IE6
WindowsIE6

Windows Firefox3
WindowsFirefox3

Windows Opera10
WindowsOpera10

Windows GoogleChrome
WindowsGoogleChrome

Windows Safari3
WindowsSafari3

Macintosh Safari4
MacintoshSafari4

Macintosh Firefox2
MacintoshFirefox2

Macintosh Opera9
MacintoshOpera9

Macintosh Camino
MacintoshCamino

Macintosh Seamonkey
MacintoshSeamonkey


ご覧いただいてわかりますように size=”” 指定のほうはかなり大きな違いがあります。
それに比べて width: 200px; 指定のほうは狂いもなく200pxになっています。

スタイルシート記述を適応させ、異種ブラウザで同じ表現ができるということは、Webサイトのデザインが崩れるのを防ぎます。

まれに入力欄が枠線をはみ出していたり、サイドバーエリアまで突き抜けているサイトを見ることがあります。

これはsize指定していることが原因である場合が多いです。

きっと制作している方も気づいていないと思いますが、このように知らないところでフォーム離脱率をアップさせる造りになっていることもありますので、必ずチェックすることをおすすめします。

サイト更新時にブラウザチェックをしていない方や、してもWindowsだけという話をよく耳にしますので今回の対策を怠らないようにしましょう。

では、今日もお読みいただきましてありがとうございました!

タグ: | | |