cman.jp > WEBページ作成TOP > CSSリファレンス > 「ボックスのリサイズ」
WEBページ作成
広告
resize 「要素のリサイズ指定」
広告
resizeの指定方法
| 構文 | |
|---|---|
|
resize : [ none | both | horizontal | vertical | block | inline ]; |
|
| プロパティ | 意味 |
| resize: none; | リサイズを行わない Chromeなど、textareaで自動的にresizeが指定されている場合でも 「none」を指定することでリサイズが無効となります |
| resize: both; | 縦横方向にリサイズを可能とします |
| resize: horizontal; | 縦方向のみリサイズを可能とします |
| resize: vertical; | 横方向のみリサイズを可能とします |
| resize: block; | 「writing-mode」「direction」に従いブロック方向にリサイズ可能とします ※多くのブラウザが非対応です |
| resize: inline; | 「writing-mode」「direction」に従いインライン方向にリサイズ可能とします ※多くのブラウザが非対応です |
|
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期値」を参照 |
|
resize のサンプル
<style type="text/css">
#demo-area textarea {
width : 250px;
height : 50px;
border : 1px solid #ccc;
margin : 3px;
padding : 5px;
}
#resize-none { resize : none }
#resize-both { resize : both }
#resize-horizontal { resize : horizontal }
#resize-vertical { resize : vertical }
#resize-block { resize : block }
#resize-inline { resize : inline }
</style>
<html>
<div id="demo-area">
<textarea id="resize-none">ここには「resize : none」が設定されています。</textarea>
<textarea id="resize-both">ここには「resize : both」が設定されています。</textarea>
<textarea id="resize-horizontal">ここには「resize : horizontal」が設定されています。</textarea>
<textarea id="resize-vertical">ここには「resize : vertical」が設定されています。</textarea>
<textarea id="resize-block">ここには「resize : block」が設定されています。</textarea>
<textarea id="resize-inline">ここには「resize : inline が設定されています。</textarea>
</div>
</html>
2017年5月時点でIEやEdgeは対応していませんのでご注意ください。
ページTOP「div」や「p」などのブロック要素をリサイズ指定するには
「overflow」を指定（none以外）する必要があります。
<style type="text/css">
#demo-area2 {
width : 250px;
height : 50px;
border : 1px solid #ccc;
margin : 3px;
padding : 5px;
overflow : auto;
resize : both;
}
</style>
<html>
<div id="demo-area2">Pタグなどにresizeを有効とするためには・・・</div>
</html>Pタグなどにresizeを有効とするためには・・・
広告