CSSでtextareaのリサイズの方向を制御する・不可にする方法

2022年6月10日

お問い合わせフォームなどで長文を入力する際によく使われるtextareaタグですが、デフォルトでは右下のつまみをドラッグすることでサイズを拡大・縮小することができます。

↓↓エリア右下をドラッグしてみてください↓↓

これは、CSSのresizeプロパティの値がbothになっており、縦横方向のリサイズを許可するというCSSがかかっていることが原因です。

しかしデザインによっては、

縦、もしくは横方向にのみリサイズを許可したい
縦横のリサイズを不可にしたい

という場合がありますよね。

そこで今回の記事では、CSSでtextareaのリサイズを制御・不可にする方法を紹介していきます。

textareaタグを使用する機会があれば、ぜひ参考にしてみてください。

textareaを縦方向にのみリサイズする

textareaを縦方向のみにリサイズを許可したい場合は、以下のコードを記述します。

textarea {
  resize: vertical; /* 縦方向のリサイズを許可 */
}

これで、テキストエリアを縦方向にのみリサイズ可能になりました。

textareaの最大・最小の高さを指定する

resizeを許可すると無限に拡大できてしまいますが、max-height・min-heightを指定することで最大・最小の高さを指定することができます。

textarea {
  resize: vertical; /* 縦方向のリサイズを許可 */
  max-height: 800px; /* 高さの最大値 */
  min-height: 100px; /* 高さの最小値 */
}

ここでは例として高さの最小値を100px、最大値を800pxにしてみました。

これで100px~800pxの間で高さをリサイズできるようになりました。

textareaを横方向にのみリサイズする

textareaのリサイズを横方向のみに限定したい場合は、以下のコードを記述します。

textarea {
  resize: horizontal; /* 横方向のリサイズを許可 */
}

これでテキストエリアを横方向にのみリサイズできるようになりました。

しかしこのままだと親要素の横幅を突き抜けてしまったり、狭すぎて文字が見えなくなったりするので、次で最小・最大の横幅を指定する方法を紹介します。

textareaの最大・最小の横幅を指定する

textareaの横幅の最大値・最小値を指定するには、max-widthとmin-widthプロパティを使用します。

textarea {
  resize: horizontal; /* 横方向のリサイズを許可 */
  max-width: 100%; /* 横幅の最大値 */
  min-width: 200px; /* 横幅の最小値 */
}

最小幅が200pxとなり、最大幅は親要素の横幅100%分になるよう指定しました。

max-widthは100%にしておくと、親要素の横幅よりも大きくなることがなくなるので、レイアウト崩れを防ぐためにも指定しておいた方が良いですね。

textareaのリサイズを不可にする

最後に、textareaを縦にも横にもリサイズさせたくない場合を見ていきましょう。

textarea {
  resize: none; /* リサイズを禁止 */
}

resizeの値をnoneにすることで、縦横のリサイズを禁止することができます。

テキストエリア右下の2重線もなくなっているのが確認できますね。

resizeを不可にする場合は、最低限の横幅・縦幅を確保しておく

リサイズを不可にする場合は、合わせて最低限の高さ・横幅を設定しておきましょう。

例えば何十行もの長文を入力するようなtextareaの場合、リサイズが不可＆縦幅が十分に足りていないと、ユーザーからすると文章が見にくいです。

textarea {
  resize: none;
  width: 100%;
  height: 300px;
}

このようにwidthとheightも合わせて指定しておきましょう。

【まとめ】CSSでtextareaのリサイズの方向を制御する・不可にする方法

以上、CSSでtextareaタグのリサイズの方向を制御する・不可にする方法を紹介しました。

textarea {
  resize: both; /* 縦横方向のリサイズを許可（デフォルト値） */
}

textarea {
  resize: vertical; /* 縦方向のリサイズを許可 */
}

textarea {
  resize: horizontal; /* 横方向のリサイズを許可 */
}

textarea {
  resize: none; /* リサイズを禁止 */
}

デザインに合わせて、これらを使い分けてみてください。