CSS: textareaのサイズ変更を不可(固定)にする
textarea要素のサイズを固定して、サイズ変更が出来ないようにすには、
CSSのresizeプロパティを使用します。
resizeプロパティの値に応じて、完全固定や、横方向だけ固定、
縦方向だけ固定などの柔軟な対応ができます。
通常の状態(サイズ変更可能)
通常は下のテキストエリアのように、 右下の斜線部分をドラッグすることで、 大きさを変更することができます。
CSS
textarea {
width: 100px;
height: 50px;
}
サイズ変更不可(固定)にする
テキストエリアをサイズ変更不可(固定)にする場合は、 「resize」プロパティの値を「none」に設定します。
右下の斜線が消えて、サイズ変更ができなくなります。
CSS
textarea {
resize: none;
width: 100px;
height: 50px;
}
横方向を可変、縦方向を固定にする
横方向だけ動かすことができるようにするには、 「resize」プロパティの値を「horizontal」に設定します。
horizontalは「水平な、横の」という意味です。
CSS
textarea {
resize: horizontal;
width: 100px;
height: 50px;
}
横方向を固定、縦方向を可変にする
縦方向だけ動かすことができるようにするには、 「resize」プロパティの値を「vertical」に設定します。
varticalは「垂直、縦の」という意味です。
CSS
textarea {
resize: vertical;
width: 100px;
height: 50px;
}
まとめ
・テキストエリアのサイズを変更不可にするにはresizeプロパティの値を「none」にします。
・横方向だけ可変にする場合は「horizontal」を指定します。
・縦方向だけ可変にする場合は「vertical」を指定します。