Javascriptの勉強を始てformを使うようになりました。そして複数行の文字入力に使うtextareaを使う時にサイズの指定方法がわからず以下のようになりました。
※ HTML上でシンプルに<textarea>タグを書くと上記のようになります。
これでは書くスペースが狭すぎます。
良い機会なのでサイズの指定方法を学習しました。
HTMLにスタイルを適用させる方法
colsとrowsで指定する
HTMLでスタイルを適用させて表示させてみます。
実際に表示させてみると以下のようになります。
※ maxlength=””を追加すると最大文字数を指定することも可能です。指定しない場合は無制限に入力可能。反対にminlength=””は最小文字数。
解説
cols=”40″
colsはテキストの横幅を指定することができます。最低でも指定した文字数が入るという程度でブラウザによって幅は変わってしまいます。そのため幅をブラウザ間で誤差を出さないためにはwidthで指定するようです。※下に例があります。
rows=”10″
rowsは縦幅を指定できます。数値=行数です。こちらもブラウザによって異なるサイズとなってしまいます。
スタイルを使って指定する
cols、rowsではなくwidthとheightで指定してみます。
以下が実際に表示させてみた結果。
pxで書くこともできますし、widthを100%にすることでレスポンシブ(スマホ対応)にもなります。
おわり
人によっては、widthとcolsとrowsを記入するけど、heightは使わない。やcssが使えない環境もあるからcolsとrowsを使うという意見もありました。
個人的にはcolsとrowsはエンジニアに方が使いwidthやheightはwebデザイナーの方が使うような印象です。デザインが求められている場合は1pxでも調整しないといけないですものね、それにcolsとrowsではレスポンシブ対応させるときに面倒そうです。
参考サイト：Should I size a textarea with CSS width / height or HTML cols / rows attributes?
