テキストエリアの横の幅(縦の高さ)をcssで制御する

テキストエリア(textarea)の横の幅または縦の高さは、閲覧者(ユーザー)が自由に変えられる。これをテキストエリアのリサイズという。

リサイズは入力に関するユーザビリティを上げる一方、ページのデザインを崩すおそれがある。

特に2カラムのページデザインでは、サイドバーの領域までリサイズされるとデザインが大きく崩れてしまうため、なるべくリサイズは縦方向のみに制限する。

テキストエリアのリサイズの制御はresize:で指定する。

横(幅)を変えられないようにする

textarea {
    resize: vertical;
}

これで縦の高さのみを変えられるようになる。さらに縦の高さの最大値(最小値)を指定するときは

textarea {
    resize: vertical;
    max-height: 500px;
    min-height: 100px;
}

とする。

縦(高さ)を変えられないようにする

textarea {
    resize: horizontal;
}

これで横の幅のみを変えられるようになる。さらに横の幅の最大値(最小値)を指定するときは

textarea {
    resize: horizontal;
    max-width: 500px;
    min-width: 100px;
}

とする。

横、縦の両方でリサイズを禁止する

textarea {
    resize: none;
}

noneにするとテキストエリアの大きさはデフォルトの大きさで固定される。

広告