From 6db154e3c35b418888ca4535ad52a1cb0cf58a38 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 1 Feb 2022 23:05:56 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/offset-position/index.md | 99 +++++++++++++++---------------- 1 file changed, 48 insertions(+), 51 deletions(-) diff --git a/files/ja/web/css/offset-position/index.md b/files/ja/web/css/offset-position/index.md index 7c63dde0e9..c7c205d14f 100644 --- a/files/ja/web/css/offset-position/index.md +++ b/files/ja/web/css/offset-position/index.md @@ -3,21 +3,23 @@ title: offset-position slug: Web/CSS/offset-position tags: - CSS - - CSS Motion Path - - CSS Property - - Experimental - - Property + - CSS モーションパス + - CSS プロパティ + - 実験的 + - プロパティ - offset-position - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.offset-position translation_of: Web/CSS/offset-position --- -
{{CSSRef}}{{seecompattable}}
+{{CSSRef}}{{SeeCompatTable}} -

offset-position は CSS のプロパティで、 {{cssxref("offset-path")}} の初期位置を定義します。

+**`offset-position`** は CSS のプロパティで、 {{cssxref("offset-path")}} の[初期位置](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position)を定義します。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 offset-position: auto;
 offset-position: top;
 offset-position: bottom;
@@ -25,10 +27,10 @@ offset-position: left;
 offset-position: right;
 offset-position: center;
 
-/* <percentage> 値 */
+/*  値 */
 offset-position: 25% 75%;
 
-/* <length> 値 */
+/*  値 */
 offset-position: 0 0;
 offset-position: 1cm 2cm;
 offset-position: 10ch 8em;
@@ -42,34 +44,35 @@ offset-position: top right 10px;
 /* グローバル値 */
 offset-position: inherit;
 offset-position: initial;
+offset-position: revert;
 offset-position: unset;
-
+``` -

値

+### 値 -
-
auto
-
初期位置は {{cssxref("position")}} プロパティで指定されたボックスの位置です。
-
<position>
-
{{cssxref("<position>")}} です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。1つから4つの値を使って定義することができます。キーワード以外の値を2つ指定した場合、1つ目の値は水平方向の位置を、2つ目の値は垂直方向の位置を表します。1つの値のみを指定した場合は、2番目の値は center とみなされます。3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 {{cssxref("background-position")}} を参照してください。
-
+- `auto` + - : 初期位置は {{cssxref("position")}} プロパティで指定されたボックスの位置です。 +- `` + - : {{cssxref("<position>")}} です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。 1 つから 4 つの値を使って定義することができます。キーワード以外の値を 2 つ指定した場合、 1 つ目の値は水平方向の位置を、 2 つ目の値は垂直方向の位置を表します。 1 つの値のみを指定した場合は、 2 番目の値は `center` とみなされます。 3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 {{cssxref("background-position")}} を参照してください。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

初期オフセット位置の設定

+### 初期オフセット位置の設定 -
<div id="motion-demo"></div>
-
+```html +
+``` -
#motion-demo {
+```css
+#motion-demo {
   offset-path: path('M20,20 C20,100 200,0 200,100');
   offset-position: left top;
   animation: move 3000ms infinite alternate ease-in-out;
@@ -85,27 +88,21 @@ offset-position: unset;
   100% {
     offset-distance: 100%;
   }
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}{{Spec2('Motion Path Level 1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.offset-position")}}

+} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("offset")}} +- {{cssxref("offset-anchor")}} +- {{cssxref("offset-distance")}} +- {{cssxref("offset-path")}} +- {{cssxref("offset-rotate")}} -- cgit v1.2.3-54-g00ecf