From ef0e5625abed731ab03ceac0379b507db4ab4fb9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 22:14:22 +0900 Subject: 特定の CSS 値の型に関する文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/shape/index.html | 81 --------------------------------------- files/ja/web/css/shape/index.md | 81 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+), 81 deletions(-) delete mode 100644 files/ja/web/css/shape/index.html create mode 100644 files/ja/web/css/shape/index.md (limited to 'files/ja/web/css/shape') diff --git a/files/ja/web/css/shape/index.html b/files/ja/web/css/shape/index.html deleted file mode 100644 index c4cc8fcae2..0000000000 --- a/files/ja/web/css/shape/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: -slug: Web/CSS/shape -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/shape ---- -
{{CSSRef}}
- -

<shape> CSS データ型は、ある領域の具体的な形状を表します。この領域は、要素のどの部分で {{Cssxref("clip")}} のようなプロパティが用いられるのか、定義するのに使われます。

- -
-

Note: <shape> and rect() は廃止された{{cssxref("clip")}}と連動しますが、 {{cssxref("clip-path")}}が支持されました。 可能であれば、代わりにclip-pathと{{cssxref("<basic-shape>")}}データ型を使用してください。

-
- -

構文

- -

rect() 関数記法は、矩形の領域を作ります。

- -

rect() 関数

- -
rect(top, right, bottom, left)
-
- -

引数は次の長さを表します:

- -
-
top
-
要素のボックスのボーダーの top と、矩形の top との差を表す {{cssxref("<length>")}}
-
right
-
要素のボックスのボーダーの left と、矩形の right との差を表す {{cssxref("<length>")}}
-
bottom
-
要素のボックスのボーダーの top と、矩形の bottom との差を表す {{cssxref("<length>")}}。
-
left
-
要素のボックスのボーダーの left と、矩形の left との差を表す {{cssxref("<length>")}}
-
- -

補間

- -

矩形の <shape> CSS データ型の値は、アニメーション用に補間可能です。top、right、bottom 、left のそれぞれが実数（浮動小数点数）として扱われ、補間されます。補間速度は、アニメーションに結びつけられた timing function で決められます。

- -

例

- -
img.clip04 {
-  clip: rect(10px, 20px, 20px, 10px);
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}{{cssxref("clip")}} プロパティと同時に定義
- -

ブラウザ実装状況

- -
- - -

{{Compat("css.types.shape")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/shape/index.md b/files/ja/web/css/shape/index.md new file mode 100644 index 0000000000..c4cc8fcae2 --- /dev/null +++ b/files/ja/web/css/shape/index.md @@ -0,0 +1,81 @@ +--- +title: +slug: Web/CSS/shape +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/shape +--- +
{{CSSRef}}
+ +

<shape> CSS データ型は、ある領域の具体的な形状を表します。この領域は、要素のどの部分で {{Cssxref("clip")}} のようなプロパティが用いられるのか、定義するのに使われます。

+ +
+

Note: <shape> and rect() は廃止された{{cssxref("clip")}}と連動しますが、 {{cssxref("clip-path")}}が支持されました。 可能であれば、代わりにclip-pathと{{cssxref("<basic-shape>")}}データ型を使用してください。

+
+ +

構文

+ +

rect() 関数記法は、矩形の領域を作ります。

+ +

rect() 関数

+ +
rect(top, right, bottom, left)
+
+ +

引数は次の長さを表します:

+ +
+
top
+
要素のボックスのボーダーの top と、矩形の top との差を表す {{cssxref("<length>")}}
+
right
+
要素のボックスのボーダーの left と、矩形の right との差を表す {{cssxref("<length>")}}
+
bottom
+
要素のボックスのボーダーの top と、矩形の bottom との差を表す {{cssxref("<length>")}}。
+
left
+
要素のボックスのボーダーの left と、矩形の left との差を表す {{cssxref("<length>")}}
+
+ +

補間

+ +

矩形の <shape> CSS データ型の値は、アニメーション用に補間可能です。top、right、bottom 、left のそれぞれが実数（浮動小数点数）として扱われ、補間されます。補間速度は、アニメーションに結びつけられた timing function で決められます。

+ +

例

+ +
img.clip04 {
+  clip: rect(10px, 20px, 20px, 10px);
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}{{cssxref("clip")}} プロパティと同時に定義
+ +

ブラウザ実装状況

+ +
+ + +

{{Compat("css.types.shape")}}

+
+ +

関連情報

+ +
    +
  • 関連 CSS プロパティ: {{Cssxref("clip")}}
    • +
  • -moz-image-rect() 関数は rect()と似た座標を使います
    • +
-- cgit v1.2.3-54-g00ecf