blob: 4b4c1e75c37211c053e6e24a3634226605fd05b5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: resize
slug: Web/CSS/resize
tags:
- CSS 基本ユーザーインターフェイス
- CSS
- CSS プロパティ
- Reference
- recipe:css-property
browser-compat: css.properties.resize
translation_of: Web/CSS/resize
---
{{CSSRef}}
**`resize`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。
{{EmbedInteractiveExample("pages/css/resize.html")}}
`resize` は以下の者には適用されません。
- インライン要素
- {{cssxref("overflow")}} プロパティが `visible` であるブロック要素
## 構文
```css
/* キーワード値 */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* グローバル値 */
resize: inherit;
resize: initial;
resize: revert;
resize: unset;
```
`resize` プロパティは以下の挙げた単一のキーワード値で指定します。
### 値
- `none`
- : ユーザーが要素の寸法を制御する方法を提供しません。
- `both`
- : 要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。
- `horizontal`
- : 要素はユーザーが寸法を変更できる仕組みを、*水平方向*について表示します。
- `vertical`
- : 要素はユーザーが寸法を変更できる仕組みを、*垂直方向*について表示します。
- `block` {{experimental_inline}}
- : 要素はユーザーが寸法を変更できる仕組みを、*ブロック方向*について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
- `inline` {{experimental_inline}}
- : 要素はユーザーが寸法を変更できる仕組みを、*インライン方向*について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Disabling_resizability_of_textareas">テキストエリアの寸法の変更を無効化</h3>
多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 `resize` プロパティでこの動作を上書きすることができます。
#### HTML
```html
<textarea>Type some text here.</textarea>
```
#### CSS
```css
textarea {
resize: none; /* Disables resizability */
}
```
#### 結果
{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}
<h3 id="Using_resize_with_arbitrary_elements">任意の要素に対する resize の使用</h3>
`resize` プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。
#### HTML
```html
<div class="resizable">
<p class="resizable">
This paragraph is resizable in all directions, because
the CSS `resize` property is set to `both` on this element.
</p>
</div>
```
#### CSS
```css
.resizable {
resize: both;
overflow: scroll;
border: 1px solid black;
}
div {
height: 300px;
width: 300px;
}
p {
height: 200px;
width: 200px;
}
```
#### 結果
{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{HTMLElement("textarea")}}
|
