diff options
Diffstat (limited to 'files/ja/web/css/offset-position/index.html')
| -rw-r--r-- | files/ja/web/css/offset-position/index.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/files/ja/web/css/offset-position/index.html b/files/ja/web/css/offset-position/index.html new file mode 100644 index 0000000000..1ec10fb9fc --- /dev/null +++ b/files/ja/web/css/offset-position/index.html @@ -0,0 +1,113 @@ +--- +title: offset-position +slug: Web/CSS/offset-position +tags: + - CSS + - CSS Motion Path + - CSS Property + - Experimental + - Property + - offset-position + - 'recipe:css-property' +translation_of: Web/CSS/offset-position +--- +<div>{{CSSRef}}{{seecompattable}}</div> + +<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> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +offset-position: auto; +offset-position: top; +offset-position: bottom; +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; + +/* 辺とオフセット値 */ +offset-position: bottom 10px right 20px; +offset-position: right 3em bottom 10px; +offset-position: bottom 10px right; +offset-position: top right 10px; + +/* グローバル値 */ +offset-position: inherit; +offset-position: initial; +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> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<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> + +<pre class="brush: css notranslate">#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; + width: 40px; + height: 40px; + background: cyan; +} + +@keyframes move { + 0% { + offset-distance: 0%; + } + 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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.properties.offset-position")}}</p> |