From 9522c54973f5e7c5bbf8cdf303277fbf1b9bc7f8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 1 Feb 2022 23:49:25 +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/index.md | 119 +++++++++++++++++++-------------------- 1 file changed, 59 insertions(+), 60 deletions(-) diff --git a/files/ja/web/css/offset/index.md b/files/ja/web/css/offset/index.md index be1f419806..85937031c1 100644 --- a/files/ja/web/css/offset/index.md +++ b/files/ja/web/css/offset/index.md @@ -3,36 +3,34 @@ title: offset slug: Web/CSS/offset tags: - CSS - - CSS Motion Path - - CSS Property - - Experimental - - Reference - - 'recipe:css-shorthand-property' + - CSS モーションパス + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.offset translation_of: Web/CSS/offset --- -

{{CSSRef}}

+{{CSSRef}} -

offset は CSS の一括指定プロパティで、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。

+**`offset`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。 -
-

: 仕様書の早期の版では、このプロパティを motion と呼んでいました。

-
+> **Note:** 仕様書の早期の版では、このプロパティを `motion` と呼んでいました。 -

構成要素のプロパティ

+## 構成要素のプロパティ -

このプロパティは以下の CSS プロパティの一括指定です。

+このプロパティは以下の CSS プロパティの一括指定です。 - +- {{cssxref("offset-anchor")}} +- {{cssxref("offset-distance")}} +- {{cssxref("offset-path")}} +- {{cssxref("offset-position")}} +- {{cssxref("offset-rotate")}} -

構文

+## 構文 -
/* オフセット位置 */
+```css
+/* オフセット位置 */
 offset: auto;
 offset: 10px 30px;
 offset: none;
@@ -52,28 +50,36 @@ offset: url(circle.svg) 50px 20deg;
 offset: ray(45deg closest-side) / 40px 20px;
 offset: url(arc.svg) 2cm / 0.5cm 3cm;
 offset: url(arc.svg) 30deg / 50px 100px;
-
-

公式定義

+/* グローバル値 */ +offset: inherit; +offset: initial; +offset: revert; +offset: unset; +``` -

{{cssinfo}}

+## 公式定義 -

形式文法

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

+## 例 -

経路に沿って要素を動かす

+### 経路に沿って要素を動かす -

HTML

+#### HTML -
<div id="offsetElement"></div>
-
+```html +
+``` -

CSS

+#### CSS -
@keyframes move {
+```css
+@keyframes move {
   from {
     offset-distance: 0%;
   }
@@ -90,31 +96,24 @@ offset: url(arc.svg) 30deg / 50px 100px;
   offset: path("M 100 100 L 300 100 L 200 300 z") auto;
   animation: move 3s linear infinite;
 }
-
- -

結果

- -

{{EmbedLiveSample("Animating_an_element_along_a_path", 350, 350)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

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