全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
テキストエリアのリサイズをCSSで制御する方法
2022.05.13
※この記事は2022年05月13日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
フォーム要素のテキストエリアの領域の拡大、縮小などのリサイズをCSSで制御する方法を紹介します。
- 1. テキストエリアのリサイズ機能について
- 2. サンプルコード
テキストエリアのリサイズ機能について
フォーム要素のテキストエリア（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サイト登録と…
