textareaをサイズ固定にする方法を解説!リサイズを禁止する

textareaをサイズ固定にする(リサイズを禁止する)方法を解説します。textareaに何も設定していないとユーザー側から簡単にリサイズできてしまいます。この問題をCSSを用いてサイズ固定を実現し、解決していきます。

コンテンツ [表示]

  1. 1textareaをサイズ固定にしたい
  2. 2textareaをサイズ固定にする方法
  3. 2.1幅、もしくは高さのみリサイズ不可にする方法
  4. 2.2最大値、最小値を設定しよう
  5. 3まとめ

textareaをサイズ固定にしたい

textareaをリサイズできる機能は便利だが、時にはサイズを固定しておきたいと思うことがあります。例えばユーザーがtextareaのリサイズをすると全体のデザインが崩れてしまうような場合です。

textareaのサイズを固定する方法はとても簡単です。
その方法を紹介していきます。

Photo byFree-Photos

textareaをサイズ固定にする方法

まずシンプルに幅、高さともにリサイズが効かないようにする方法について紹介します。

その方法とはCSSでtextareaの要素にresize:none;を追加するだけです。

それではサンプルコードを用いて、実際の挙動を見てみましょう。

このようにtextareaのリサイズが効かないです。

幅、もしくは高さのみリサイズ不可にする方法

水平方向、もしくは垂直方向にのみリサイズしたくないということがあると思います。
その方法を今回は紹介します。

ではまず水平方向のリサイズを禁止にする方法を見ていきましょう。

水平方向のリサイズを禁止にする、つまりは垂直方向のサイズのみ可変とすればいいわけです。
その方法とはCSSにresize:vertical;を設定するです。

verticalとは垂直という意味で、すなわち垂直方向のみリサイズ可能ということです。

では実際にサンプルコードを用いてその挙動を見てみましょう。

このように垂直方向にしかリサイズできません。

では同じ考え方で水平方向のみサイズを可変とする方法を見てみましょう。

その方法とはCSSにresize:horizontal;と設定するです。

では実際にサンプルコードを用いて挙動を見てみましょう。

 

このように水平方向にしかリサイズできないことが分かります。

最大値、最小値を設定しよう

最大値、最小値を設定しておくと、これ以上は小さくならない、またこれ以上は大きくならないというような設定が可能となります。

ではその方法を紹介します。

それはCSSでmin-widthmax-widthmin-heightmax-heightを設定することで実現できます。

では実際にサンプルコードを用いて挙動を見てみましょう。

リサイズしていただくと、このようにある値以上は大きくならない、もしくは小さくならないというように設定することができます。

そして上のサンプルではテキストボックスの内容によって自動的に高さが調整されるようになっています。

これについて詳しく知りたい方は別記事で載せていますので、ぜひ下のリンクから見てみてください。

あわせて読みたい
textareaの高さを内容によって自動で調整する方法!のイメージ
textareaの高さを内容によって自動で調整する方法!
textareaの高さを内容によって自動で調整する方法を解説します。何も設定しないとtextareaがスクロールされ前の文章が何を書いたのか分からなくなります。この問題に対してjQueryを用いてtextareaの高さを内容によって自動で調整させ解決します。

まとめ

いかがでしたでしょうか?

textareaをサイズ固定することで、ユーザの操作や文章量によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりするのを防ぐことができます。

万全なフォームを実装するためにぜひ使ってみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次