diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-01 23:05:56 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-08 23:10:23 +0900 |
commit | 6db154e3c35b418888ca4535ad52a1cb0cf58a38 (patch) | |
tree | ab5eb6afddfcf3a8ac2e70677b29f1eba7fac2af /files/ja/web/css | |
parent | d78c3c3dfdc81bb2a8273f74314ca2a9db9d88ac (diff) | |
download | translated-content-6db154e3c35b418888ca4535ad52a1cb0cf58a38.tar.gz translated-content-6db154e3c35b418888ca4535ad52a1cb0cf58a38.tar.bz2 translated-content-6db154e3c35b418888ca4535ad52a1cb0cf58a38.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
-rw-r--r-- | files/ja/web/css/offset-position/index.md | 99 |
1 files 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 --- -<div>{{CSSRef}}{{seecompattable}}</div> +{{CSSRef}}{{SeeCompatTable}} -<p><strong><code>offset-position</code></strong> は CSS のプロパティで、 {{cssxref("offset-path")}} の<a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">初期位置</a>を定義します。</p> +**`offset-position`** は CSS のプロパティで、 {{cssxref("offset-path")}} の[初期位置](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position)を定義します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ offset-position: auto; offset-position: top; offset-position: bottom; @@ -25,10 +27,10 @@ offset-position: left; offset-position: right; offset-position: center; -/* <percentage> 値 */ +/* <percentage> 値 */ offset-position: 25% 75%; -/* <length> 値 */ +/* <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; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>auto</code></dt> - <dd>初期位置は {{cssxref("position")}} プロパティで指定されたボックスの位置です。</dd> - <dt id="<position>"><code><position></code></dt> - <dd>{{cssxref("<position>")}} です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。1つから4つの値を使って定義することができます。キーワード以外の値を2つ指定した場合、1つ目の値は水平方向の位置を、2つ目の値は垂直方向の位置を表します。1つの値のみを指定した場合は、2番目の値は <code>center</code> とみなされます。3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 {{cssxref("background-position")}} を参照してください。</dd> -</dl> +- `auto` + - : 初期位置は {{cssxref("position")}} プロパティで指定されたボックスの位置です。 +- `<position>` + - : {{cssxref("<position>")}} です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。 1 つから 4 つの値を使って定義することができます。キーワード以外の値を 2 つ指定した場合、 1 つ目の値は水平方向の位置を、 2 つ目の値は垂直方向の位置を表します。 1 つの値のみを指定した場合は、 2 番目の値は `center` とみなされます。 3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 {{cssxref("background-position")}} を参照してください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_initial_offset_position" name="Setting_initial_offset_position">初期オフセット位置の設定</h3> +### 初期オフセット位置の設定 -<pre class="brush: html notranslate"><div id="motion-demo"></div> -</pre> +```html +<div id="motion-demo"></div> +``` -<pre class="brush: css notranslate">#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%; } -}</pre> - -<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-position-property', 'offset-position')}}</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-position")}}</p> +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("offset")}} +- {{cssxref("offset-anchor")}} +- {{cssxref("offset-distance")}} +- {{cssxref("offset-path")}} +- {{cssxref("offset-rotate")}} |