From a0316dd2c57164e53651f4cb8c8de50120e72095 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 23:35:37 +0900 Subject: CSS データ型に関する文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/23 時点の英語版に同期 --- files/ja/web/css/shape/index.md | 97 ++++++++++++++++++----------------------- 1 file changed, 43 insertions(+), 54 deletions(-) (limited to 'files/ja/web/css/shape') diff --git a/files/ja/web/css/shape/index.md b/files/ja/web/css/shape/index.md index c4cc8fcae2..dd5704572a 100644 --- a/files/ja/web/css/shape/index.md +++ b/files/ja/web/css/shape/index.md @@ -3,79 +3,68 @@ title: slug: Web/CSS/shape tags: - CSS - - CSS Reference + - CSS データ型 + - CSS 関数 + - データ型 + - 非推奨 + - レイアウト + - リファレンス + - ウェブ +browser-compat: css.types.shape translation_of: Web/CSS/shape --- -
{{CSSRef}}
+{{CSSRef}}{{deprecated_header}} -

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

+**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、ある領域の具体的な形状を表します。この領域は、{{cssxref("clip")}} プロパティが適用される要素の一部を表します。 -
-

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

-
+> **Note:** `` と `rect()` は {{cssxref("clip")}} と連携して動作しますが、これは {{cssxref("clip-path")}} に置き換えらえて非推奨となりました。可能であれば、代わりに `clip-path` と {{cssxref("<basic-shape>")}} データ型を使用してください。 -

構文

+## 構文 -

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

+`` データ型は `rect()` 関数を使って指定し、長方形の形で領域を生成します。 -

rect() 関数

+`rect()` -
rect(top, right, bottom, left)
-
+```css +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>")}}
-
+![](rect.png) -

補間

+- _top_ + - : {{cssxref("<length>")}} で、この要素のボックスの上の境界から、矩形の上端までのオフセットを表します。 +- _right_ + - : {{cssxref("<length>")}} で、この要素のボックスの左の境界から、矩形の右端までのオフセットを表します。 +- _bottom_ + - : {{cssxref("<length>")}} で、この要素のボックスの上の境界から、矩形の下端までのオフセットを表します。 +- _left_ + - : {{cssxref("<length>")}} で、この要素のボックスの左の境界から、矩形の左端までのオフセットを表します。 -

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

+## 補間 -

例

+アニメーションの際には、`` データ型の値は、`top`、`right`、`bottom`、`left` の各要素に補間され、それぞれが実数の浮動小数点数として扱われます。補間の速度は、アニメーションに関連する[タイミング関数](/ja/docs/Web/CSS/easing-function)によって決定されます。 -
img.clip04 {
-  clip: rect(10px, 20px, 20px, 10px);
-}
+## 例 -

仕様書

+### 正しい rect() 関数の使い方の例 - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}{{cssxref("clip")}} プロパティと同時に定義
+```css +img.clip04 { + clip: rect(10px, 20px, 20px, 10px); +} +``` -

ブラウザ実装状況

+## 仕様書 -
+{{Specifications}} +## ブラウザーの互換性 -

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

-
+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • 関連 CSS プロパティ: {{Cssxref("clip")}}
    • -
  • -moz-image-rect() 関数は rect()と似た座標を使います
    • -
+- 関連する CSS プロパティ: {{Cssxref("clip")}} +- [`-moz-image-rect()`](/ja/docs/Web/CSS/-moz-image-rect) 関数は `rect()` と同様の座標を使います -- cgit v1.2.3-54-g00ecf