クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

投稿日:

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。

ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因になります。

対策として、テキストエリアのサイズ変更にCSSで制限をかけることで解決します。

主に使用する制限は以下の2つです。

  1. サイズ変更不可
  2. 縦幅のみサイズ変更可能

1. サイズ変更不可

ユーザーがテキストエリアのサイズを一切変更できなくします。
あらかじめ、必要な大きさを確保しておけば変更できなくても問題ないかと思います。
スクロールバーは必要に応じて追加されるので安心ですね。

 

2. 縦幅のみサイズ変更可能

レイアウト的に縦幅が変更されても問題がない場合は、縦幅のみ変更できるようにすると良いかと思います。
以下のCSSで実現可能です。

レイアウト崩れもUIも気にする必要がありますね。
サンプルも作りました。

 

-CSS

執筆者:

関連記事

CSS 正規表現でクラスを複数指定する

CSSで作成するクラスはなるべく少ない方が良いですよね。 でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。 その同じようなクラスにも1つずつ同じ属性を設定していくなんて事も多々あり …

CSS テキストボックスのフォーカス時の青枠を無効にする

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

CSS 設定値の初期化(サンプル付き)

CSSフレームワークやプラグインのCSSをどんどん追加していくと、通常のタグに影響が出てしまう場合があります。 元のCSSを改修すれば良いのですが、影響が大きい場合や時間が無い場合があるかと思います。 …

CSS ボタンの基本装飾

最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「10 …


comment

メールアドレスが公開されることはありません。