• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2018/10/03
書いた人:
rurippa!
カテゴリ:
CSS
33,285 views

textarea(テキストエリア)のリサイズ機能を、CSSで制御する方法を紹介します。

テキストエリアのリサイズ機能を、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;
          }
          

まとめ

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


この記事を読んだ人はこんな記事も読んでいます