Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介

メニューを開く

Firefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御

CSS2012年4月23日

Firefox4.0からはデフォルトでテキストエリアのサイズをユーザーが自由にリサイズできるようになっています。
これは何もしなければ縦にも横にもいくらでもリサイズできるので、こういった挙動が好ましくない場合は、CSSで制御することができます。

  • Firefox最新版、Safari5.1、chrome18で動作確認済み

縦・横ともにリサイズ可能(特にCSSの指定なし)

textarea.textarea-01{
}

縦のみリサイズ可能

textarea.textarea-02{
resize:vertical;
}

横のみリサイズ可能

textarea.textarea-03{
resize:horizontal;
}

縦・横ともにリサイズ不可能

textarea.textarea-04{
resize:none;
}

番外編/リサイズ可能なdiv

div.hoge{
width:498px;
height:80px;
resize:both;
border:1px solid #ccc;
overflow:scroll;
}

考え方としては、縦横両方とも可変不可能にするのはユーザーの期待する挙動を裏切る可能性を高めてしまうので、対応するとしても縦可変のみ有効にさせておくのがベターかもしれません。

以前、この対応を知らずに「横可変できないようにしてくれ」とおっしゃったクライアントに「できません」と突っぱねてしまった後、調べたら対応できることに気づき、謝罪したことがありますm(_ _)m

ちなみにIEは全て(IE6~IE9)このテキストエリアのリサイズにブラウザが対応していません。よってresizeプロパティもサポートされていないようです。

この記事を読んでいる方にオススメの記事

「CSS」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

  • 承認制のため、即時には反映されません。

ページの先頭に戻る