Web blog WEBブログ

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

2022.05.13

※この記事は2022年05月13日時点の情報をもとに作成されました。

こんにちは。コーダーの兼山です。
フォーム要素のテキストエリアの領域の拡大、縮小などのリサイズをCSSで制御する方法を紹介します。

テキストエリアのリサイズ機能について

フォーム要素のテキストエリア(textarea)要素は、エリアの右下をドラッグすることでリサイズをすることが可能となっています。

ユーザのドラッグ操作による、予期せぬレイアウト乱れが発生することを防ぐため、リサイズを禁止したり、条件付きで制御したりといった対策をします。

テキストエリアを制御するには「resize」プロパティで指定をします。
このプロパティはoverflowが「visible」に設定されていると効果を発揮しないので注意しましょう。

サンプルコード

① デフォルト
縦横ともにリサイズ可能な状態です。

textarea{
  resize: both;
}

 

② リサイズを禁止
縦横のリサイズを禁止します。

textarea{
  resize: none;
}

 

③ 横方向のリサイズを禁止
横方向の拡大を禁止し、縦のみ拡縮を許可します。

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

 

④ 縦方向のリサイズを禁止
縦方向の拡大を禁止し、横のみ拡縮を許可します。

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

 

⑤ リサイズにおける最大・最小の幅を指定する
リサイズを許可したときも、max系のプロパティによって最大、最小の幅を設定することができます。

textarea{
  resize: auto;
  max-width: 500px;
  max-height: 500px;
  min-width: 100px;
  min-height: 100px;
  width:300px;
  height:200px;
}

 

まとめ

今回はフォーム要素のテキストエリアの制御について紹介しました。
頻繁に指定することはないですが、ユーザビリティの視点から、リサイズの制御が必要な場面があります。
ユーザー目線のフォームを実装しましょう。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

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

こんにちは。コーダーの兼山です。 コーディングでのテキストの装飾は、基本的なフォント指定以外では画像で処理するのが一般的…

こんにちは。コーダーの兼山です。 最近、ブロック要素の境界を跨いだテキストを、ブロックに重なる部分、そうでない部分で異な…

こんにちは。コーダーの兼山です。 テーブルをモバイル画面などの小さな範囲で表を見せる際に役立つ、行や列を固定してスクロー…

こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…

無料相談窓口