diff options
| author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
| commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
| tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/ja/web/css/basic-shape/ellipse() | |
| parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
| download | translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2 translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/ja/web/css/basic-shape/ellipse()')
| -rw-r--r-- | files/ja/web/css/basic-shape/ellipse()/index.md | 67 |
1 files changed, 0 insertions, 67 deletions
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()")}} とよく似た方法で動作します。 - -### 値 - -- `<shape-radius>` - - - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 - - - `closest-side` - - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 - - `farthest-side` - - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 - -- `<position>` - - : 円の中心を移動します。{{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) |