クルーデザイン

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

CSS

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

投稿日:

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

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

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

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

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

1. サイズ変更不可

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

 

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

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

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

 

-CSS

執筆者:

関連記事

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS 丸、正円の中に数字・文字を書く!(サンプル付き)

良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後 …

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

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


comment

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