MB-Support

パソコン初心者のサポートページ

10.textarea の cols と rows がブラウザにより異なる表示する問題

 cols ( 横幅 ) と rows ( 縦幅 ) だけの指定では、Internet Explorer と Firefox で大きくサイズが異なってしまいます。これを対処しないと、場合によってはホームページ全体が崩れる可能性があるでしょう。


以前、 複数行のテキスト入力フィールドの作成 で掲載した内容に不足があったので 追加する事になりました。 管理人が実際に利用してみた結果を、このサイトに掲載しているのですが、掲載した内容を利用していて、トラブルに遭遇したのでその説明と対処方法を掲載したいと思います。




cols ( 横幅 )、rows ( 縦幅 )

textarea は、文字通りテキスト入力するエリアを指定するタグですが、属性の cols ( 横幅 )、rows ( 縦幅 ) を指定して、エリアの面積を決定します。

・ソース

<p>コメント入力欄:</p>
<textarea name="A" cols="B" rows="C"></textarea>

・実際の表示

横幅を決定する cols には、数字を入力するのですが、これは半角英数字の数で決まると思っていました。 例えば、cols を 10 に設定した場合は、テキストエリア内に10文字の半角英数字を入力できる横幅を確保できるという解釈です。



右のスクリーンショットは、textarea の cols を 10 に設定 して、Internet Explorer7 と Firefox2.0 で表示した状態です。 左クリックすると拡大できます( 利用しているブラウザで JavaScript を有効にしている必要があります)。

上の様に、実際にテキストエリアを並べても、ブラウザにより表示方法が異なるので比較する事ができません。 そのため、スクリーンショットを掲載しています。

Internet Explorer 7 では、0 〜 9 までの 半角数字 10 個分の横幅を確保できますが、Firefox2.0 では、半角数字 17 の横幅が確保されてしまいます。 これは、縦幅を決定する rows でも同じで、Firefox の場合は全く半角英数字を基準していません。何を基準にしているのかは不明ですが、この差は意外と大きい く致命的です。 とりあえず cols と rows の指定だけでは、ブラウザによりホームページのデザインが崩れる原因になります。



対処方法

対処方法は簡単で、両者のブラウザでテキストエリアの大きさを統一するには、スタイルシートで横幅 ( width:数字px; ) と高さ ( height:数字px; ) を指定します。

・ソース

<p>コメント入力欄:</p>
<textarea name="A" cols="B" rows="C" style="width:横幅px;height:高さpx;">
</textarea>

スクロールバーの表示により、スクロールバー分(おそらく半角1文字)の文字入力が異なってしまいますが、テキストエリアの横幅や高さによる、ホームページが崩れる問題を回避する事ができます。

ただ、このやり方には納得ができないのは事実です。 じゃぁ・・・cols と rows は何だよって話です。 フォントスタイルやフォントサイズにより解釈が違うとも考えましたが、条件が一緒の状態でシンプルな2行のソースです。 もっと根本的な問題なのかも知れません。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項