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」を指定します。