diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-01 23:49:25 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-08 23:10:23 +0900 |
commit | 9522c54973f5e7c5bbf8cdf303277fbf1b9bc7f8 (patch) | |
tree | 20d1e8cb12568fa2b17a6c9b936af2ca8875a6e3 | |
parent | 19b2f50f56f0246c105d5d0cd2865c25711f9677 (diff) | |
download | translated-content-9522c54973f5e7c5bbf8cdf303277fbf1b9bc7f8.tar.gz translated-content-9522c54973f5e7c5bbf8cdf303277fbf1b9bc7f8.tar.bz2 translated-content-9522c54973f5e7c5bbf8cdf303277fbf1b9bc7f8.zip |
2021/08/13 時点の英語版に同期
-rw-r--r-- | files/ja/web/css/offset/index.md | 119 |
1 files 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 --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>offset</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。</p> +**`offset`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。 -<div class="note"> -<p><strong>注</strong>: 仕様書の早期の版では、このプロパティを <code>motion</code> と呼んでいました。</p> -</div> +> **Note:** 仕様書の早期の版では、このプロパティを `motion` と呼んでいました。 -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<ul> - <li>{{cssxref("offset-anchor")}}</li> - <li>{{cssxref("offset-distance")}}</li> - <li>{{cssxref("offset-path")}}</li> - <li>{{cssxref("offset-position")}}</li> - <li>{{cssxref("offset-rotate")}}</li> -</ul> +- {{cssxref("offset-anchor")}} +- {{cssxref("offset-distance")}} +- {{cssxref("offset-path")}} +- {{cssxref("offset-position")}} +- {{cssxref("offset-rotate")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css notranslate">/* オフセット位置 */ +```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; -</pre> -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +/* グローバル値 */ +offset: inherit; +offset: initial; +offset: revert; +offset: unset; +``` -<p>{{cssinfo}}</p> +## 公式定義 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Animating_an_element_along_a_path" name="Animating_an_element_along_a_path">経路に沿って要素を動かす</h3> +### 経路に沿って要素を動かす -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div id="offsetElement"></div> -</pre> +```html +<div id="offsetElement"></div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">@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; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Animating_an_element_along_a_path", 350, 350)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状態</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td> - <td>{{Spec2('Motion Path Level 1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.offset")}}</p> +``` + +#### 結果 + +{{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")}} |