mozilla
Your Search Results

    resize

    概要

    CSS の resize プロパティは、閲覧者による要素のサイズ変更の可否と、リサイズ方向の制限を指定するのに用います。

    構文

    resize: none | both | horizontal | vertical | inherit
    

    none
    この値は、ユーザーに要素のリサイズ機能を提供しない事を意味します。
    horizontal
    ユーザーによる要素の水平方向のリサイズ操作を許可します。
    vertical
    ユーザーによる要素の垂直方向のリサイズ操作を許可します。
    both
    ユーザーによる要素のリサイズ操作を、全方向に対して可能にします。
    注意: resize は、overflow プロパティに visible が指定された要素に対しては適用されない事に注意して下さい。

    テキストエリアのリサイズを無効化する

    resize プロパティに対応したブラウザ(Gecko 2.0 Firefox 4 以降)では、<textarea> 要素はデフォルトでリサイズ可能になっています。この動作は以下の様な指定で上書きする事が出来ます。

    textarea.example {
      resize: none; /* disables resizability */
    }
    

    任意の要素をリサイズ可能にする

    「概要」の章に記述されている条件を満たした要素は全てリサイズ可能にする事が出来ます。リサイズ可能な <div> 要素の中にリサイズ可能な <p> 要素を配置した例を見てみましょう。

    <div style="resize:both; overflow:scroll; width:300px; height:300px; border:1px solid black">
      <p style="resize:both; overflow:scroll; width:200px; height:200px; border:1px solid black">
        This paragraph is resizable, because the CSS resize property is set to 'both' on this
        element.
      </p>
    </div>
    

    arbitrary.png

    実際の表示を確認

    仕様

    仕様書 策定状況 コメント
    CSS Basic User Interface Module Level 3 草案  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート (<textarea>) 1.0 4.0 (2.0)-moz 未サポート 未サポート 3.0 (522)
    ブロックレベル要素、置換要素、テーブルセル、インラインブロックに対する適用(※overflowvisible が指定されている要素は不可) 4.0 5.0 (5.0) 未サポート 未サポート 4.0
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート (<textarea>) ? ? ? ? ?
    ブロックレベル要素、置換要素、テーブルセル、インラインブロックに対する適用(※overflowvisible が指定されている要素は不可) ? ? ? ? ?

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank, sosleepy
    最終更新者: ethertank,
    サイドバーを隠す