テキストエリアのリサイズ機能を、CSSで制御する方法

デフォルトでは、エリアの右下をドラッグしてリサイズできますが、レイアウトが崩れることもあります。
CSSを使って防げますので紹介します。

CSSでテキストエリアのリサイズを制御してみよう

ベースとなるHTML、CSSはこちらです。

        <textarea name="sample"></textarea>

        <style>
          textarea{
            width: 150px;
            height: 100px;
          }
        </style>
        

デフォルト（タテ・ヨコともにリサイズ可能な状態）

通常はこの状態です。

        textarea {
          resize: both;
        }
        

タテ方向のみリサイズ可能

        textarea {
          resize: vertical;
        }
        

ヨコ方向のみリサイズ可能

        textarea {
          resize: horizontal;
        }
        

テキストエリアの最小値と最大を指定する（指定の大きさまでリサイズ可）

最小値と最大値を指定しているので、レイアウトが崩れない範囲で指定してみてください。

        textarea {
          min-width: 100px;
          min-height: 50px;
          max-width: 200px;
          max-height: 150px;
        }
        

リサイズ不可

          textarea {
            resize: none;
          }
          

まとめ

横幅のリサイズを可能にすると、ブラウザ幅を超えてしまうので…笑
タテ方向のみリサイズ可能、レイアウトによってはリサイズ不可にしてしまうのも良いかもしれませんね。