From d54b0e0f0a7aa80f4bb20fbdab8ee03a381c4ea2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:38:00 +0900 Subject: .html を .md に改名 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/resize/index.html | 156 ------------------------------------- files/ja/web/css/resize/index.md | 156 +++++++++++++++++++++++++++++++++++++ 2 files changed, 156 insertions(+), 156 deletions(-) delete mode 100644 files/ja/web/css/resize/index.html create mode 100644 files/ja/web/css/resize/index.md (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 deleted file mode 100644 index 1633a346e6..0000000000 --- a/files/ja/web/css/resize/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/resize/index.md b/files/ja/web/css/resize/index.md new file mode 100644 index 0000000000..1633a346e6 --- /dev/null +++ b/files/ja/web/css/resize/index.md @@ -0,0 +1,156 @@ +--- +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