CSSでtextareaのリサイズ（サイズ変更）機能を無効にする方法

Webページのフォームでtextarea（複数行テキスト入力欄）を使用すると、デフォルトでは右下につまみが表示され、ユーザーが自由にサイズを変更できてしまいます。レイアウト崩れを防ぎたい場合などは、このリサイズ機能を無効にすると便利です。

resize: none でリサイズを無効化する

textareaのサイズ変更を無効にするには、CSSの resize プロパティに none を指定します。

textarea {
    resize: none;
}

このスタイルを適用すると、ページ内のすべてのtextareaで右下のつまみが非表示になり、ドラッグによるサイズ変更ができなくなります。

特定のtextareaだけ無効にする方法

name属性で指定する場合

すべてではなく、特定のtextareaだけリサイズを無効にしたい場合は、属性セレクタを使います。たとえば、name="demo" が設定されたtextareaだけを対象にするには、次のように記述します。

textarea[name=demo] {
    resize: none;
}

id属性で指定する場合

対象のtextareaに id="demo" が設定されている場合は、以下のようなHTMLに対して、

<textarea id="demo"></textarea>

IDセレクタを使って次のように指定します。

#demo {
    resize: none;
}

補足：resizeプロパティのその他の値

resize プロパティは none 以外にも値を設定できます。

• both：縦横どちらもリサイズ可能（デフォルト）
• horizontal：横方向のみリサイズ可能
• vertical：縦方向のみリサイズ可能
• none：リサイズ不可

用途に応じてこれらの値を使い分けることで、フォームの操作性とデザインのバランスを柔軟に調整できます。