Sep. 23rd,2020
プロパティについて
＃
概要
| 初期値 | “resize: none;” |
| 適用対象 | “overflow”プロパティの値がvisible”でない要素、任意で置換要素 |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定したキーワード |
| アニメーション | 離散 |
“resize”プロパティは要素のユーザーによるサイズの変更の可否を指定するプロパティです。
ユーザーによるサイズの変更ができる場合はブラウザはユーザーが操作して要素のサイズを変更する仕組みを提供します。多くのブラウザでは要素の右下につまみを表示し、ドラッグすることでサイズを変更することができます。
“width”プロパティと“height”プロパティで要素の横幅と高さが指定されていれば要素はまず指定された大きさで表示されますが、“resize”プロパティでサイズの変更が可能になっている場合にはユーザーの操作によって指定された大きさからの変更が可能になります。
サンプルコード
div { resize: vertical;}
＃
＃
使用例
＃
＃
ユーザーによるサイズの変更ができる
横書きの場合
div {
overflow: auto;
resize: both;
}
このボックスは大きさが変更できます。
div {
overflow: auto;
resize: vertical;
}
このボックスは高さが変更できます。
div {
overflow: auto;
resize: horizontal;
}
このボックスは横幅が変更できます。
div {
overflow: auto;
resize: block;
}
このボックスはブロック軸方向の大きさが変更できます。
div {
overflow: auto;
resize: inline;
}
このボックスはインライン軸方向の大きさが変更できます。
縦書きの場合
div {
overflow: auto;
resize: both;
writing-mode: vertical-rl;
}
このボックスは大きさが変更できます。
div {
overflow: auto;
resize: vertical;
writing-mode: vertical-rl;
}
このボックスは高さが変更できます。
div {
overflow: auto;
resize: horizontal;
writing-mode: vertical-rl;
}
このボックスは横幅が変更できます。
div {
overflow: auto;
resize: block;
writing-mode: vertical-rl;
}
このボックスはブロック軸方向の大きさが変更できます。
div {
overflow: auto;
resize: inline;
writing-mode: vertical-rl;
}
このボックスはインライン軸方向の大きさが変更できます。
