トップスポンサー広告 > Firefox4.0から導入された「テキストエリアのリサイズ」をCSSで制御したい
トップCSSメモ > Firefox4.0から導入された「テキストエリアのリサイズ」をCSSで制御したい

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[FC2広告]

Firefox4.0から導入された「テキストエリアのリサイズ」をCSSで制御したい

 Google ChromeやSafariのレンダリングエンジン「Webkit」にはテキストエリアをリサイズできる機能が備わっていて、FirefoxもVer.4からリサイズに対応しました。でも、デザイン上好ましくない場合は、CSS「resize」で設定してあげるとリサイズを制御することができます。

lizwetv.jpg

resizeとは

・Safari 3.0(WebKit 522)/Chrome 1.0(WebKit 528)/Firefox 4.0(Gecko 2.0)から対応
・CSS3のプロパティ
・上記ブラウザの<TEXTAREA>タグは resize:both がデフォルト
・DIV,Pなどのブロック要素は、overflow:scroll を設定すればresizeできる

resizeが有効だとテキストエリアの右下にマークが表示される

FirefoxとChromeで見た目が少し違いますが、右下のマークにカーソルを合わすと矢印が変わるのでドラッグすればどちらもテキストエリアのサイズを変更できます
textareaのリサイズ



CSSでtextareaのリサイズを制御する方法

この記事はCSS3に関する記事です。IE8やOpera11はCSS3に対応していません。
サイズ変更を無効にする
CSSコード表示サンプル
textarea.muko {
	  resize: none;
}

縦のサイズ変更のみ有効にする
CSSコード表示サンプル
textarea.tate {
	  resize: vertical;
}

横のサイズ変更のみ有効にする
CSSコード表示サンプル
textarea.yoko {
	  resize: horizontal;
}

リサイズの最大値や最小値を設定する
CSSコード表示サンプル
textarea.limited {
	  resize: both;
      max-width:250px;
      min-width:200px;
      max-height:200px;
      min-height:100px;
}

リサイズ出来ない要素をリサイズ出来るようにする
CSSコード表示サンプル
div.resizable { 
    resize: both;
    overflow:scroll;
}
p.resizable { 
    resize: both;
    overflow:scroll;
}
リサイズが可能なDIVタグ

リサイズが可能なPタグ

スポンサーサイト
[FC2広告]

Trackback

スポンサーリンク

この記事に対するコメントは0件隠す

(編集・削除用)
管理者にだけ表示を許可

トラックバック (0)

はてなブックマーク

関連記事(関連度)
関連記事(関連度)

ハッケンブログとは

グリ

ハッケンブログ(発見部ログ)は、便利・面白ウェブサービス/フリー素材サイト/フリーソフトなどを発見・まとめ紹介するブログです。

まとめ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。