【HTML】cols属性とrows属性でテキストリアのサイズを変更する方法

このページについて

このページではHTMLで使う事ができるcols属性とrows属性の機能と使い方について解説しています。

cols属性はtextaraタグでのみ使う事ができる属性です。こちらはテキストエリアの横方向の大きさを操作できる属性になります。その際に基準とするのが文字数です。

初期値は20で、横に20文字分のテキストエリアが表示されます。

cols属性は数字を指定する事で横の文字数を決定できます。

<textarea cols="30"></textarea>

この場合は横に30文字分のテキストエリアという指定になります。

rows属性はtextareaタグでのみ使う事ができる属性です。こちらはテキストエリアの縦方向の大きさを操作できる属性になります。その際に基準とするのは行数です。

rows属性は数字を指定する事で行数を指定できます。

<textarea rows="5"></textarea>

これで5行分のテキストエリアが表示されます。

colsとrowsは見た目上の数値操作をしているだけであって、入力文字数とかそういう制限を設定できる属性ではありません。なので入力してもらう文字数の上限を設定するのであればmaxlength属性を使いましょう。

textareaタグはデフォルトだと入力欄のサイズをユーザーが変更できるようになっています。それをCSSで無効化したり、大きさ変更しても上限を設定したりできます。

固定化するにはresize:none;を使えばOKです。以下はデフォルトのtextareaタグなのでサイズ変更が可能となっています。

ここにstyleタグでtextareaに対してリサイズ不可のプロパティを付与します。

右下にあったつまみが非表示となり、サイズ変更もできなくなります。

横方向のみ・縦方向のみの場合は、以下のプロパティを使います。

大きさの上限を設定するにはmax-heightなどを使用します。この辺りの詳しいことはmax-widthやmin-widthなどのページを参照してください。

横幅はサイトのどっかしらのコンテンツに自動で合わせたいケースもあります。そういう場合、widthプロパティを使用します。これは指定したコンテンツの横幅をパーセンテージやピクセルで指定できる機能を持っています。

<style>
textarea {
width: 100%;
height: 30%;
}

とすれば横幅が自動で親コンテナの横幅を元に100%になります。ちなみにresize:noneを有効化していてもこのwidthには全く影響はありません。resizeはユーザーからの操作を無効化しますが、widthは自動で伸縮して大きさを変えてくれます。

colsとrowsはtextareaタグの縦方向と横方向の大きさを指定できる属性になります。しかし見た目だけの変化で最大文字数などの制限を与えることはできないため、見た目の変化を担当するCSSで自動伸縮とかを設定した方が後々のことを考えると楽かなとか思ったりしています。