CSSでテキストエリアをリサイズ不可にしたり任意の要素をリサイズ可能にする

@kasumiiです。こんにちは。

忘れがちなのでちょこっとメモ。

ChromeやFirefoxなどでテキストエリアの右下をドラッグするとサイズを広げることができますが、これをCSSでリサイズ不可にしたり、リサイズ可能な方向を指定したりする方法です。

普段はデフォルトのままサイズ変更できたほうがいいと思いますが、たまーにサイズ変更できないようにしたい場合があるので。

textarea {
  resize: none;
}

textarea {
  resize: horizontal;
}

textarea {
  resize: vertical;
}

textarea {
  resize: both;
}

というか、resizeプロパティってCSS3だったんですねー。

テキストエリアをリサイズ不可にする以外にも、任意の要素にresize: both;を指定することでリサイズ可能にできるのは覚えておくと便利そうです。（でも、overflow: visible;が指定された要素には適用されないので注意！）

【参考】resize – CSS | MDN