textarea(テキストエリア)のサイズをresizeプロパティで固定する方法【CSS】

最終更新日：2024-10-25

公開日：2024-10-25

ページ内に広告が含まれています。

textarea(テキストエリア)のサイズをresizeプロパティで固定する方法【CSS】

フォームのパーツとして必ずと言っていいほど使用するtextarea(テキストエリア)。
デザインによっては、サイズを変更されるとレイアウトが崩れてしまうといった事が起こる場合もあります。そんな時に使える、textareaのサイズを固定し、ユーザー側で変更出来ないようにする便利なCSSを解説していきます。

textarea要素について
textarea要素のサイズ固定について
resizeプロパティで設定できる値
さいごに

textarea要素について

フォーム要素のテキストエリア要素は、複数行のテキストを入力出来るテキストフィールドを表す要素です。
この要素は、通常下記の例のようにユーザー側で要素の幅や高さを変更出来る仕様になっているため、レイアウトが崩れたりしてしまう可能性があります。

<textarea placeholder="デフォルトのtextarea"></textarea>

上記の例では、max-widthを100%に設定していますが、設定していない場合、レイアウトを無視して横方向に突き抜けて表示されてしまいます。
そんなレイアウト崩れを防ぐ為の手段として、幅や高さを変更出来ないようにする、CSSのresizeプロパティを次の項目から解説していきます。

textarea要素のサイズ固定について

次に、テキストエリア要素のサイズ固定についてです。
テキストエリアのサイズの固定をする為には、CSSのプロパティであるresizeプロパティを使用します。
CSSのresizeプロパティは、要素の寸法を変更出来るかどうか、どの方向に変更出来るかどうかを設定する事の出来るプロパティです。

このresizeプロパティを使用する事で、幅と高さを固定する事も出来ますし、幅のみ、高さのみの固定も可能です。
下記に、例としてそれぞれのコードを掲載いたします。

幅と高さを固定する(リサイズ禁止)

textarea {
    width: 300px;
    height: 150px;
    resize: none;
}

幅のみ固定(水平方向のみリサイズ禁止)

textarea {
    width: 300px;
    height: 150px;
    resize: vertical;
}

高さのみ固定(垂直方向のみリサイズ禁止)

textarea {
    width: 300px;
    height: 150px;
    resize: horizontal;
}

それぞれ、目的としたサイズの固定(リサイズ禁止)が出来ているかと思います。CSSのresizeプロパティを使用する事で、意図しないデザインの崩れを防ぐ事が可能です。
ただし、テキストエリア内のテキストがテキストエリアからあふれる場合はスクロールバーが出てしまいますので、適切な横幅、高さを確保するようにしてください。