..


スポンサーリンク

CSS3のプロパティのサイズを変更

マックスボッシによって書かれた記事

と、まだ最終的な- - CSS3、新しいによって導入されている多くの技術革新の中でカスケーディングスタイルシートのリリースプロパティは特に興味深いですリサイズです CSS3の出現は、スケーラブルの使用が必要な要素を作成するまで、このプロパティおかげで、それが見やすい、あなたは、CSSコード(いずれかの行を使用して、弊社のWebページに非常にシンプル、サイズ変更可能な要素を作成することができます複雑なJavaScript関数)。

現在、このプロパティだけでなく、CSS3の他の多くは、普遍的にすべてのブラウザでサポートされていますが、唯一の家族のWebKit(SafariおよびChrome)とFirefox 4とされていません。

このようなタグの<textarea>として、これらのブラウザのページ要素のいくつかは、、高さと幅の両方で、デフォルトでサイズ変更可能であることに留意すること。

サイズ変更の管理

プロパティの値が異なることがサイズを変更:

  • なし =要素はサイズ変更ではありません。
  • 水平 =要素は水平方向にのみサイズを変更することができます。
  • = 垂直エレメントは垂直方向にのみサイズを変更することができます。
  • =要素の両方が垂直方向と水平方向の両方にサイズ変更することができます。
ここではいくつかのインスタンスは、次のとおりです。





 / *







テキストエリアのサイズ変更を防止







 * /







テキストエリア{リサイズ:なし;}









 / *







私は垂直方向にサイズ変更可能な要素を作成します。







 * /







 div.vert {リサイズ:垂直;}



バインドされているとのサイズを管理する

プロパティのサイズ変更の使用は非常にしばしば伴われる - デザイン上の理由 - 最小値および/または最大値を決定する制約にすると、その要素のサイズ変更を想定することができます。 これを行うには、以下のCSSプロパティを使用:

  • のmax - widthや max - height
  • min - width最小高さ
固定の最大幅と水平にサイズ変更可能なdivの例を見てみましょう:





 {div.horiz



  



高さ:200pxの;



  



幅:300ピクセル;



  



のmax - width:600PX;



  



背景:#EEEEEE;



  



国境:3px固体#DDDDDD。



  



オーバーフロー:自動;



  



リサイズ:水平;







 }



このページは(もちろん、財産はあなたがそれをサポートするブラウザを使用する必要がある作業をリサイズ参照する)作業のデモを見ることができます。

同じカテゴリの...
E -ラーニング
CSS(コース) CSS(コース)
W3C CSSやXHTMLに応じてWebデザインとアクセシビリティ。 29€から開始。
HTML(コース) HTML(コース)
29€からWeb用のマークアップ言語。
ウェブマスター上級(コース) ウェブマスター上級(コース)
プロのウェブマスターになる。 39€から。
スポンサーリンク