formの実験 - まとめ
Mac OS X という一つのプラットフォームを取っても、ブラウザに因ってサイトのレイアウトのに個体差が生じてしまう現象は周知の通りだ。取り分け入力フォームの差異は甚だしいが、一般的なHTMLタグの解説では『各ブラウザによって異なる』と略述するに留り、実際にどの低度誤差が生じるのか把握し辛い。そこで、入力フォームの中でも差異が顕著に現れる <input type="text"> 及び <textarea> の縦横サイズと入力文字数を中心として調べ、各ブラウザに於ける誤差とスタイルシートの適用範囲を纏めてみた。（作成日: 2006年6月17日 (土曜日) 01:39:32 PM）
手順
各ブラウザ毎に下記のフォームを表示させ、調査項目に則り検証する。
ソース
- <style type="text/css">
- <!--
- body { background-color:#ccc;color:#000; }
- input{ background-color:#fcc;color:#000; }
- input:hover{ background-color:#ffc;color:#000; }
- textarea{ background-color:#e0ffff;color:#000; }
- textarea:hover{ background-color:#98fb98;color:#000; }
- select{background-color:#cd5c5c;color:#fff;}
- select:hover{color:#cd5c5c;background-color:#fff;}
- -->
- </style>
- <form action="" method="post">
- 性別：<input type="radio" name="sex" value="male">オス
- 柄：<select name="blood">
- <option value="sabi">サビ</option>
- <option value="koge">コゲ</option>
- <option value="kiji">キジ</option>
- <option value="cyatora">チャトラ</option>
- <option value="sabatora">サバトラ</option>
- <option value="mike">ミケ</option>
- <option value="muji">無地</option>
- <option value="hoka">その他</option>
- </select><br>
- ご感想：<br>
- <input type="submit" value="送信">
- <input type="reset" value="リセット">
- </form>
調査項目
1. <input type="text" size="50"> について
- 縦 × 横の長さ(px)
- 1size 辺りにおける横の長さ(px)
- 表示最大文字数（英語）
- 表示最大文字数（日本語）
2. <input type="text" size="50"> に font-size:8px; を指定した場合（日本語のみ）
- 縦 × 横の長さ(px)
- 表示最大文字数（日本語）
- 注1）css 上で font-size:8px; と指定し、上記項目に関して調査。
- 注2）英語は文字サイズが小さくなりすぎた為省略
3. <textarea rows="4" cols="50">
- 縦 × 横の長さ(px)
- 表示最大文字数（英語）
- 表示最大行数（英語）
- 表示最大文字数（日本語）
- 表示最大行数（日本語）
4. <textarea rows="4" cols="50"> にfont-size:8px; を指定した場合（日本語のみ）
- 縦 × 横の長さ(px)
- 表示最大文字数（日本語）
- 表示最大行数（日本語）
- 注1）css 上で font-size:8px; と指定し、以下の項目を調査
- 注2）英語は表示サイズが小さくなった為省略
5. 見た目上の面積(px²)を比較する
| 赤い線で囲まれた部分の面積を計算する |
6. css にて background-color と hover プロパティが有効か調べる
- <input type="text">
- <input type="radio">
- <input type="submit">
- <textarea>
- <select>
実験結果
px 値の計測にはFree Ruler を使用。数 px の誤差は気にせず計測。
文字数計測は日本語は「あ」英語は「m」を使用し、<textarea> の場合縦スクロールバーが出た状態で目に見える範囲に何文字入力できるかを調べた。
スクリーンショット（リンク）
| 縦 × 横(px) | 20 × 357 | 24 × 260 | 20 × 266 | 21 × 267 | 17 × 265 | 27 × 361 | 27 × 363 | 20 × 306 | 17 × 355 | 20 × 311 | 27 × 363 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 表示最大文字数(En) | 50 | 27 | 26 | 26 | 29 | 30 | 30 | 27 | 34 | 30 | 29 |
| 表示最大文字数(Ja) | 25 | 24 | 24 | 22 | 26 | 27 | 27 | 25 | 32 | 28 | 27 |
| 縦 × 横(px) | 15 × 206 | 16 × 160 | 15 × 160 | 16 × 163 | 17 × 265 | 19 × 208 | 19 × 208 | 16 × 207 | 16 × 261 | 17 × 210 | 19 × 208 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 表示最大文字数(Ja) (1との比較) | 25(0) | 22(-2) | 22(-2) | 19(-3) | 29(+3) | 25(-2) | 25(-2) | 25(0) | 32(0) | 25(-3) | 25(-2) |
| 縦 × 横(px) | 72 × 355 | 98 × 434 | 86 × 434 | 63 × 355 | 56 × 253 | 78 × 353 | 80 × 358 | 52 × 301 | 55 × 359 | 61 × 317 | 80 × 353 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 行数(En) | 4 | 4 | 4 | 4 | 4 | 5 | 5 | 4 | 4 | 4 | 5 |
| 表示最大文字数(En) | 48 | 53 | 53 | 50 | 27 | 52 | 52 | 49 | 33 | 52 | 52 |
| 行数(Ja) | 4 | 5 | 4 | 4 | 4 | 5 | 5 | 4 | 3 | 5.5 | 5 |
| 表示最大文字数(Ja) | 25 | 25 | 25 | 25 | 25 | 25 | 25 | 24 | 31 | 27 | 25 |
| 縦 × 横(px) | 46 × 204 | 61 × 205 | 54 × 209 | 43 × 206 | 50 × 254 | 57 × 205 | 56 × 204 | 41 × 203 | 42 × 267 | 54 × 203 | 57 × 204 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 行数(Ja) | 4(0) | 6(+2) | 5(+1) | 4(0) | 4(0) | 6(+1) | 6(+1) | 4(0) | 4(+1) | 6(+0.5) | 6(+1) |
| 表示最大文字数(Ja) (1との比較) | 25(0) | 25(0) | 25(0) | 25(0) | 27(+2) | 25(0) | 25(0) | 24(0) | 33(+2) | 24(-3) | 25(0) |
| 縦×横(px) | 157×393 | 204×435 | 188×431 | 165×374 | 154×314 | 206×405 | 207×405 | 158×356 | 173×404 | 179×357 | 207×405 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 面積(px²) | 61701 | 82620 | 81028 | 61710 | 48356 | 83430 | 83835 | 56248 | 69892 | 63903 | 83835 |
| input(text) 通常 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
|---|---|---|---|---|---|---|---|---|---|---|---|
| input(text) :hover | ○ | ○ | ○ | × | ○ | ○ | ○ | × | ○ | ○ | ○ |
| input(radio) 通常 | ○ | × | × | ○ | ○ | × | × | ○ | × | × | × |
| input(radio) :hover | ○ | × | × | × | ○ | × | × | × | × | × | × |
| input(submit) 通常 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | × | ○ |
| input(submit) :hover | ○ | ○ | ○ | × | ○ | ○ | ○ | × | × | × | ○ |
| textarea 通常 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| textarea :hover | ○ | ○ | ○ | × | ○ | ○ | ○ | × | ○ | ○ | ○ |
| select 通常 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | × | ○ |
| select :hover | ○ | ○ | ○ | × | ○ | ○ | ○ | × | × | × | ○ |
考察
調査項目1及び2 <input type="text" size="50"> について
HTML 4 仕様書邦訳計画に掲載されている『HTML 4.01の仕様に関する W3C 勧告文書』に依れば、<input type="text"> の size は、1単位が1文字に該当するということだ。つまり、size="50" の場合、1バイト文字である英語が50文字、2バイト文字である日本語が約25文字入力できることになる。しかし、2006年6月時点で W3C の勧告どおり、英語が50文字、日本語が約25文字入力できたブラウザは Windows Opera のみであった。
一方 Safari は、英語34文字、日本語32文字という独自解釈をしていることが判明した。また、Windows Opera、Safari 以外のブラウザでは、英語と日本語の入力文字数に差が無く、最大文字数は共に 25文字±3文字であった。尚、スタイルシートに font-size を指定した場合、多くのブラウザで最大文字数が変動する為、注意が必要である。
調査項目3及び4 <textarea rows="4" cols="50"> について
上述した W3C 勧告文書の日本語訳では、rows は行数、cols は平均的な文字幅の文字数に該当するとの事である。従って、英語は4行50文字、日本語は4行約25文字入力できる筈である。この点を W3C 勧告どおり入力出来たのは Windows IE6 のみであった。
textarea でも Safari は独自解釈をしており、英語は4行33文字、日本語は3行31文字という結果が出た。どうやら safari は W3C が云うところの『平均的な文字幅』から約1.6倍を基準に文字幅を定めているようだ。更に Mac Opera と Camino にも特異な点があり、Mac Opera は英語のみ4行27字、Camino は日本語のみ5.5行27文字という独自解釈を見せていた。
Windows IE6、Mac Opera、Safari、Camino 以外のブラウザでは rows が4行＋1行、cols が英語は50文字±3文字以内、日本語は25文字±3文字以内であった。
Mac Opera、Safari、Camino は、スタイルシートで font-size を指定した場合、表示される最大文字数に変化があった。font-size の指定によっては他のブラウザでも変化することが予測されるので <input type="text"> と同じく注意したい。
調査項目5 見た目上の面積(px²)
| 小 | ＜ | ＜ | ＜ | ＜ | ＜ | ＜ | ＜ | ＜ | ＜ | 大 |
ブラウザの環境設定がデフォルトの場合、form の見た目面積が、最小は Mac Opera。最大は Mac NN と Mac Mozilla で比率は1：1.73 になる。従って、レイアウトを整えるには FireFox 等の Gecko 系のブラウザが最良である。
調査項目6 cssの指定
- 全ブラウザで、<input type="text"> 及び <textarea> の背景色、線、文字色指定が有効
- IE では :hover 指定が無効
- Opera のみ、<input type="radio"> に対してラジオボタン内部の背景色指定が有効
- IE では背景色がラジオボタンを取り囲むような形になる
- <input type="radio"> に背景色等を付けたい場合は、Javascript を使う必要がある
- Safari や Camino では <input type="submit"> に於けるcssの指定が無効（アクアボタン表示）、他のブラウザでは有効。
- Safari Camino MacIE では <select> に於ける css の指定が無効（独自仕様）、他のブラウザでは有効。
form作成のまとめと対策
Safari の鬼子っぷりには泣かされっぱなし。
全般的な注意点
- form を作る場合は、FireFox などの Gecko 系ブラウザでレイアウトを整える。
- Mac 環境がある場合は、Mac Opera でレイアウトを確認し、余白が気になる時は、hack を使うか背景を工夫する等の対策を行う。
- <input type="text"> 及び <textarea> に於ける、css の指定は背景色、文字色、線程度に留める。
- css も含め、最も W3C 勧告に準拠しているブラウザは、Win Opera。
- Safari や Camino で他のブラウザと同じボタンを使いたい場合は、<input type="image"> を使用する。
- Safari、Camino、MacIE は <select> の css 指定が無効。
- Safari を他のブラウザと完全に同じ見栄えにする事は諦める。
<input type="text"> の size を指定する場合（英語・日本語）
- size="(表示したい最大文字数) × 2" が目安
- 日本語で最大30文字表示させたければ、size="60" と指定する。誤差は±3文字。
<textarea> の rows、cols を指定する場合（英語）
- rows="表示したい行数"
- cols="1" → 約1文字
- 英語で5行最大30文字表示させたければ、rows="5" cols="30" と指定する。誤差は±3文字。
<textarea> のrows、cols を指定する場合（日本語）
- rows="表示したい行数"
- cols="2" → 約1文字
- 日本語で5行最大30文字表示させたければ、rows="5" cols="60" と指定する。誤差は±2文字。
