From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/resize/index.html | 158 +++++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/ja/web/css/resize/index.html (limited to 'files/ja/web/css/resize') diff --git a/files/ja/web/css/resize/index.html b/files/ja/web/css/resize/index.html new file mode 100644 index 0000000000..ad5e111cc5 --- /dev/null +++ b/files/ja/web/css/resize/index.html @@ -0,0 +1,158 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - Reference +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

CSS の resize プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/resize.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* グローバル値 */
+resize: inherit;
+resize: initial;
+resize: unset;
+ +

resize プロパティは以下の挙げた単一のキーワード値で指定します。

+ +

値

+ +
+
none
+
ユーザーが要素の寸法を制御する方法を提供しません。
+
both
+
要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。
+
horizontal
+
要素はユーザーが寸法を変更できる仕組みを、水平方向について表示します。
+
vertical
+
要素はユーザーが寸法を変更できる仕組みを、垂直方向について表示します。
+
block {{experimental_inline}}
+
要素はユーザーが寸法を変更できる仕組みを、ブロック方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
+
inline {{experimental_inline}}
+
要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
+
+ +
+

メモ: resize は以下の場合は適用されません。

+ + +
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

テキストエリアの寸法の変更を無効化

+ +

多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 resize プロパティでこの動作を上書きすることができます。

+ +

CSS

+ +
textarea {
+  resize: none; /* Disables resizability */
+}
+
+ +

HTML

+ +
<textarea>Type some text here.</textarea>
+ +

結果

+ +

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+ +

任意の要素に対する resize の使用

+ +

resize プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。

+ +

CSS

+ +
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+ +

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>
+ +

結果

+ +

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}block と inline の値を追加
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.resize")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf