From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/ja/web/css/basic-shape/circle()/index.md | 59 --------------------- files/ja/web/css/basic-shape/circle/index.md | 60 ++++++++++++++++++++++ files/ja/web/css/basic-shape/ellipse()/index.md | 67 ------------------------ files/ja/web/css/basic-shape/ellipse/index.md | 68 +++++++++++++++++++++++++ files/ja/web/css/basic-shape/inset()/index.md | 51 ------------------- files/ja/web/css/basic-shape/inset/index.md | 52 +++++++++++++++++++ files/ja/web/css/basic-shape/polygon()/index.md | 51 ------------------- files/ja/web/css/basic-shape/polygon/index.md | 52 +++++++++++++++++++ 8 files changed, 232 insertions(+), 228 deletions(-) delete mode 100644 files/ja/web/css/basic-shape/circle()/index.md create mode 100644 files/ja/web/css/basic-shape/circle/index.md delete mode 100644 files/ja/web/css/basic-shape/ellipse()/index.md create mode 100644 files/ja/web/css/basic-shape/ellipse/index.md delete mode 100644 files/ja/web/css/basic-shape/inset()/index.md create mode 100644 files/ja/web/css/basic-shape/inset/index.md delete mode 100644 files/ja/web/css/basic-shape/polygon()/index.md create mode 100644 files/ja/web/css/basic-shape/polygon/index.md (limited to 'files/ja/web/css/basic-shape') diff --git a/files/ja/web/css/basic-shape/circle()/index.md b/files/ja/web/css/basic-shape/circle()/index.md deleted file mode 100644 index 5c1b236415..0000000000 --- a/files/ja/web/css/basic-shape/circle()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: circle() -slug: Web/CSS/basic-shape/circle() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - circle - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.circle -translation_of: Web/CSS/basic-shape/circle() ---- -{{CSSRef}} - -**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -shape-outside: circle(50%); -clip-path: circle(6rem at 12rem 8rem); -``` - -### 値 - -- `` - - - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 - - - `closest-side` - - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 - - `farthest-side` - - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 - -- `` - - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 - -## 例 - -### 基本的な円 - -下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 - -{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/circle/index.md b/files/ja/web/css/basic-shape/circle/index.md new file mode 100644 index 0000000000..ac8ecca800 --- /dev/null +++ b/files/ja/web/css/basic-shape/circle/index.md @@ -0,0 +1,60 @@ +--- +title: circle() +slug: Web/CSS/basic-shape/circle +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - circle + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/circle() +original_slug: Web/CSS/basic-shape/circle() +browser-compat: css.types.basic-shape.circle +--- +{{CSSRef}} + +**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: circle(50%); +clip-path: circle(6rem at 12rem 8rem); +``` + +### 値 + +- `` + + - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + +- `` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な円 + +下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 + +{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse()/index.md b/files/ja/web/css/basic-shape/ellipse()/index.md deleted file mode 100644 index 54b5f5b6b4..0000000000 --- a/files/ja/web/css/basic-shape/ellipse()/index.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: ellipse() -slug: Web/CSS/basic-shape/ellipse() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - ellipse - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.ellipse -translation_of: Web/CSS/basic-shape/ellipse() ---- -{{CSSRef}} - -**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -shape-outside: ellipse(40% 50% at left); -shape-outside: ellipse(closest-side farthest-side at 30%); -``` - -楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 - -### 値 - -- `` - - - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 - - - `closest-side` - - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 - - `farthest-side` - - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 - -- `` - - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 - -## 例 - -### 基本的な ellipse() の例 - -この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} - -### closest-side / farthest-side の値の使用 - -キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse/index.md b/files/ja/web/css/basic-shape/ellipse/index.md new file mode 100644 index 0000000000..3fb705600e --- /dev/null +++ b/files/ja/web/css/basic-shape/ellipse/index.md @@ -0,0 +1,68 @@ +--- +title: ellipse() +slug: Web/CSS/basic-shape/ellipse +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - ellipse + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/ellipse() +original_slug: Web/CSS/basic-shape/ellipse() +browser-compat: css.types.basic-shape.ellipse +--- +{{CSSRef}} + +**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: ellipse(40% 50% at left); +shape-outside: ellipse(closest-side farthest-side at 30%); +``` + +楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 + +### 値 + +- `` + + - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 + +- `` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な ellipse() の例 + +この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} + +### closest-side / farthest-side の値の使用 + +キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/inset()/index.md b/files/ja/web/css/basic-shape/inset()/index.md deleted file mode 100644 index 7afdcbb0eb..0000000000 --- a/files/ja/web/css/basic-shape/inset()/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: inset() -slug: Web/CSS/basic-shape/inset() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - inset - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.inset -translation_of: Web/CSS/basic-shape/inset() ---- -{{CSSRef}} - -**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 - -## 構文 - -```css -shape-outside: inset(20px 50px 10px 0 round 50px); -``` - -### 値 - -- `{1,4}` - - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 -- `` - - : オプションの [``](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 - -## 例 - -### 基本的な内側の矩形の例 - -下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/inset/index.md b/files/ja/web/css/basic-shape/inset/index.md new file mode 100644 index 0000000000..06de859d46 --- /dev/null +++ b/files/ja/web/css/basic-shape/inset/index.md @@ -0,0 +1,52 @@ +--- +title: inset() +slug: Web/CSS/basic-shape/inset +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - inset + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/inset() +original_slug: Web/CSS/basic-shape/inset() +browser-compat: css.types.basic-shape.inset +--- +{{CSSRef}} + +**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 + +## 構文 + +```css +shape-outside: inset(20px 50px 10px 0 round 50px); +``` + +### 値 + +- `{1,4}` + - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 +- `` + - : オプションの [``](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 + +## 例 + +### 基本的な内側の矩形の例 + +下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon()/index.md b/files/ja/web/css/basic-shape/polygon()/index.md deleted file mode 100644 index 9a2df5b4d0..0000000000 --- a/files/ja/web/css/basic-shape/polygon()/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: polygon() -slug: Web/CSS/basic-shape/polygon() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - polygon - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.polygon -translation_of: Web/CSS/basic-shape/polygon() ---- -{{CSSRef}} - -**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); -``` - -### 値 - -- `` - - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 -- `[]#` - - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 - -## 例 - -### 基本的な polygon() の例 - -この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon/index.md b/files/ja/web/css/basic-shape/polygon/index.md new file mode 100644 index 0000000000..910b233dbf --- /dev/null +++ b/files/ja/web/css/basic-shape/polygon/index.md @@ -0,0 +1,52 @@ +--- +title: polygon() +slug: Web/CSS/basic-shape/polygon +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - polygon + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/polygon() +original_slug: Web/CSS/basic-shape/polygon() +browser-compat: css.types.basic-shape.polygon +--- +{{CSSRef}} + +**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); +``` + +### 値 + +- `` + - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 +- `[]#` + - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 + +## 例 + +### 基本的な polygon() の例 + +この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) -- cgit v1.2.3-54-g00ecf