From f29c1e5bbfb2590b04267bf88b5becf20af18bc5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Oct 2021 23:56:53 +0900 Subject: CSS スクロールスナップの文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/css_scroll_snap/browser_compat/index.html | 47 ----- .../css/css_scroll_snap/browser_compat/index.md | 47 +++++ files/ja/web/css/scroll-margin-block/index.md | 65 ++++++ files/ja/web/css/scroll-margin-bottom/index.html | 68 ------- files/ja/web/css/scroll-margin-bottom/index.md | 68 +++++++ .../ja/web/css/scroll-margin-inline-end/index.html | 66 ------ files/ja/web/css/scroll-margin-inline-end/index.md | 66 ++++++ .../web/css/scroll-margin-inline-start/index.html | 68 ------- .../ja/web/css/scroll-margin-inline-start/index.md | 68 +++++++ files/ja/web/css/scroll-margin-inline/index.html | 66 ------ files/ja/web/css/scroll-margin-inline/index.md | 66 ++++++ files/ja/web/css/scroll-margin-left/index.html | 69 ------- files/ja/web/css/scroll-margin-left/index.md | 69 +++++++ files/ja/web/css/scroll-margin-right/index.html | 67 ------ files/ja/web/css/scroll-margin-right/index.md | 67 ++++++ files/ja/web/css/scroll-margin-top/index.html | 68 ------- files/ja/web/css/scroll-margin-top/index.md | 68 +++++++ files/ja/web/css/scroll-margin/index.html | 62 ------ files/ja/web/css/scroll-margin/index.md | 62 ++++++ .../ja/web/css/scroll-padding-block-end/index.html | 76 ------- files/ja/web/css/scroll-padding-block-end/index.md | 76 +++++++ .../web/css/scroll-padding-block-start/index.html | 74 ------- .../ja/web/css/scroll-padding-block-start/index.md | 74 +++++++ files/ja/web/css/scroll-padding-block/index.html | 72 ------- files/ja/web/css/scroll-padding-block/index.md | 72 +++++++ files/ja/web/css/scroll-padding-bottom/index.html | 74 ------- files/ja/web/css/scroll-padding-bottom/index.md | 74 +++++++ .../web/css/scroll-padding-inline-end/index.html | 73 ------- .../ja/web/css/scroll-padding-inline-end/index.md | 73 +++++++ .../web/css/scroll-padding-inline-start/index.html | 73 ------- .../web/css/scroll-padding-inline-start/index.md | 73 +++++++ files/ja/web/css/scroll-padding-inline/index.html | 76 ------- files/ja/web/css/scroll-padding-inline/index.md | 76 +++++++ files/ja/web/css/scroll-padding-left/index.html | 73 ------- files/ja/web/css/scroll-padding-left/index.md | 73 +++++++ files/ja/web/css/scroll-padding-right/index.html | 72 ------- files/ja/web/css/scroll-padding-right/index.md | 72 +++++++ files/ja/web/css/scroll-padding-top/index.html | 72 ------- files/ja/web/css/scroll-padding-top/index.md | 72 +++++++ files/ja/web/css/scroll-padding/index.html | 86 -------- files/ja/web/css/scroll-padding/index.md | 86 ++++++++ files/ja/web/css/scroll-snap-align/index.html | 74 ------- files/ja/web/css/scroll-snap-align/index.md | 74 +++++++ files/ja/web/css/scroll-snap-stop/index.html | 224 --------------------- files/ja/web/css/scroll-snap-stop/index.md | 224 +++++++++++++++++++++ 45 files changed, 1765 insertions(+), 1700 deletions(-) delete mode 100644 files/ja/web/css/css_scroll_snap/browser_compat/index.html create mode 100644 files/ja/web/css/css_scroll_snap/browser_compat/index.md create mode 100644 files/ja/web/css/scroll-margin-block/index.md delete mode 100644 files/ja/web/css/scroll-margin-bottom/index.html create mode 100644 files/ja/web/css/scroll-margin-bottom/index.md delete mode 100644 files/ja/web/css/scroll-margin-inline-end/index.html create mode 100644 files/ja/web/css/scroll-margin-inline-end/index.md delete mode 100644 files/ja/web/css/scroll-margin-inline-start/index.html create mode 100644 files/ja/web/css/scroll-margin-inline-start/index.md delete mode 100644 files/ja/web/css/scroll-margin-inline/index.html create mode 100644 files/ja/web/css/scroll-margin-inline/index.md delete mode 100644 files/ja/web/css/scroll-margin-left/index.html create mode 100644 files/ja/web/css/scroll-margin-left/index.md delete mode 100644 files/ja/web/css/scroll-margin-right/index.html create mode 100644 files/ja/web/css/scroll-margin-right/index.md delete mode 100644 files/ja/web/css/scroll-margin-top/index.html create mode 100644 files/ja/web/css/scroll-margin-top/index.md delete mode 100644 files/ja/web/css/scroll-margin/index.html create mode 100644 files/ja/web/css/scroll-margin/index.md delete mode 100644 files/ja/web/css/scroll-padding-block-end/index.html create mode 100644 files/ja/web/css/scroll-padding-block-end/index.md delete mode 100644 files/ja/web/css/scroll-padding-block-start/index.html create mode 100644 files/ja/web/css/scroll-padding-block-start/index.md delete mode 100644 files/ja/web/css/scroll-padding-block/index.html create mode 100644 files/ja/web/css/scroll-padding-block/index.md delete mode 100644 files/ja/web/css/scroll-padding-bottom/index.html create mode 100644 files/ja/web/css/scroll-padding-bottom/index.md delete mode 100644 files/ja/web/css/scroll-padding-inline-end/index.html create mode 100644 files/ja/web/css/scroll-padding-inline-end/index.md delete mode 100644 files/ja/web/css/scroll-padding-inline-start/index.html create mode 100644 files/ja/web/css/scroll-padding-inline-start/index.md delete mode 100644 files/ja/web/css/scroll-padding-inline/index.html create mode 100644 files/ja/web/css/scroll-padding-inline/index.md delete mode 100644 files/ja/web/css/scroll-padding-left/index.html create mode 100644 files/ja/web/css/scroll-padding-left/index.md delete mode 100644 files/ja/web/css/scroll-padding-right/index.html create mode 100644 files/ja/web/css/scroll-padding-right/index.md delete mode 100644 files/ja/web/css/scroll-padding-top/index.html create mode 100644 files/ja/web/css/scroll-padding-top/index.md delete mode 100644 files/ja/web/css/scroll-padding/index.html create mode 100644 files/ja/web/css/scroll-padding/index.md delete mode 100644 files/ja/web/css/scroll-snap-align/index.html create mode 100644 files/ja/web/css/scroll-snap-align/index.md delete mode 100644 files/ja/web/css/scroll-snap-stop/index.html create mode 100644 files/ja/web/css/scroll-snap-stop/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.html b/files/ja/web/css/css_scroll_snap/browser_compat/index.html deleted file mode 100644 index e4e1a3473a..0000000000 --- a/files/ja/web/css/css_scroll_snap/browser_compat/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: ブラウザーの互換性とスクロールスナップ -slug: Web/CSS/CSS_Scroll_Snap/Browser_compat -tags: - - CSS - - CSS Scroll Snap - - CSS スクロールスナップ - - Guide - - browser compat - - compat - - 互換性 -translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat ---- -
{{CSSRef}}
- -

Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。

- -

古い Firefox の実装を使用していた場合はどうすればよいのか

- -

もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。

- -

主に以下のようなことに注意してください。

- - - -

フォールバックとして古い実装を使用することができるか

- -

既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit プリフィックス付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。

- -

この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。

- -

この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な y 軸の値を伴い、もう一つは Firefox 68 以前で、 y 値のないプロパティに対応しているもののためです。

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

- -

両方の仕様書を使用する必要があるか

- -

スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。この点では、フォールバック版を使用することで利益を享受する膨大な数のユーザーに見せるデータがない限り、新しい仕様のみを実装することをお勧めします。

- -

新しい仕様書に対応していることを、特性クエリを使用して確認したいのであれば、 {{CSSxRef("scroll-snap-align")}} を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。

- -

なぜ二つの版があるのか

- -

最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。

diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.md b/files/ja/web/css/css_scroll_snap/browser_compat/index.md new file mode 100644 index 0000000000..e4e1a3473a --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/browser_compat/index.md @@ -0,0 +1,47 @@ +--- +title: ブラウザーの互換性とスクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap/Browser_compat +tags: + - CSS + - CSS Scroll Snap + - CSS スクロールスナップ + - Guide + - browser compat + - compat + - 互換性 +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +
{{CSSRef}}
+ +

Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。

+ +

古い Firefox の実装を使用していた場合はどうすればよいのか

+ +

もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。

+ +

主に以下のようなことに注意してください。

+ + + +

フォールバックとして古い実装を使用することができるか

+ +

既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit プリフィックス付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。

+ +

この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。

+ +

この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な y 軸の値を伴い、もう一つは Firefox 68 以前で、 y 値のないプロパティに対応しているもののためです。

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

+ +

両方の仕様書を使用する必要があるか

+ +

スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。この点では、フォールバック版を使用することで利益を享受する膨大な数のユーザーに見せるデータがない限り、新しい仕様のみを実装することをお勧めします。

+ +

新しい仕様書に対応していることを、特性クエリを使用して確認したいのであれば、 {{CSSxRef("scroll-snap-align")}} を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。

+ +

なぜ二つの版があるのか

+ +

最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。

diff --git a/files/ja/web/css/scroll-margin-block/index.md b/files/ja/web/css/scroll-margin-block/index.md new file mode 100644 index 0000000000..b78fd009a4 --- /dev/null +++ b/files/ja/web/css/scroll-margin-block/index.md @@ -0,0 +1,65 @@ +--- +title: scroll-margin-block +slug: Web/CSS/scroll-margin-block +tags: + - CSS + - recipe:css-shorthand-property + - scroll-margin-block +browser-compat: css.properties.scroll-margin-block +--- +{{CSSRef}} + +The `scroll-margin-block` [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the scroll margins of an element in the block dimension. + +{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}} + +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- [`scroll-margin-block-end`](/en-US/docs/Web/CSS/scroll-margin-block-end) +- [`scroll-margin-block-start`](/en-US/docs/Web/CSS/scroll-margin-block-start) + +## Syntax + +```css +/* values */ +scroll-margin-block: 10px; +scroll-margin-block: 1em .5em ; + +/* Global values */ +scroll-margin-block: inherit; +scroll-margin-block: initial; +scroll-margin-block: revert; +scroll-margin-block: unset; +``` + +### Values + +- `` + - : An outset from the corresponding edge of the scroll container. + +## Description + +The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-bottom/index.html b/files/ja/web/css/scroll-margin-bottom/index.html deleted file mode 100644 index 12df44a35e..0000000000 --- a/files/ja/web/css/scroll-margin-bottom/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: scroll-margin-bottom -slug: Web/CSS/scroll-margin-bottom -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-margin - - scroll-margin-bottom -translation_of: Web/CSS/scroll-margin-bottom ---- -
{{CSSRef}}
- -

scroll-margin-bottom プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

- -
{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin-bottom: 10px;
-scroll-margin-bottom: 1em;
-
-/* グローバル値 */
-scroll-margin-bottom: inherit;
-scroll-margin-bottom: initial;
-scroll-margin-bottom: unset;
-
- -

値

- -
-
<length>
-
スクロールコンテナーの下側の辺からみた外部の距離です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-margin-bottom")}}

diff --git a/files/ja/web/css/scroll-margin-bottom/index.md b/files/ja/web/css/scroll-margin-bottom/index.md new file mode 100644 index 0000000000..12df44a35e --- /dev/null +++ b/files/ja/web/css/scroll-margin-bottom/index.md @@ -0,0 +1,68 @@ +--- +title: scroll-margin-bottom +slug: Web/CSS/scroll-margin-bottom +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - Web + - scroll-margin + - scroll-margin-bottom +translation_of: Web/CSS/scroll-margin-bottom +--- +
{{CSSRef}}
+ +

scroll-margin-bottom プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin-bottom: 10px;
+scroll-margin-bottom: 1em;
+
+/* グローバル値 */
+scroll-margin-bottom: inherit;
+scroll-margin-bottom: initial;
+scroll-margin-bottom: unset;
+
+ +

値

+ +
+
<length>
+
スクロールコンテナーの下側の辺からみた外部の距離です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-margin-bottom")}}

diff --git a/files/ja/web/css/scroll-margin-inline-end/index.html b/files/ja/web/css/scroll-margin-inline-end/index.html deleted file mode 100644 index 7047a4c8fa..0000000000 --- a/files/ja/web/css/scroll-margin-inline-end/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: scroll-margin-inline-end -slug: Web/CSS/scroll-margin-inline-end -tags: - - Advanced - - CSS - - NeedsExample - - Reference - - 上級者 -translation_of: Web/CSS/scroll-margin-inline-end ---- -
{{CSSRef}}
- -

scroll-margin-inline-end プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

- -
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin-inline-end: 10px;
-scroll-margin-inline-end: 1em;
-
-/* グローバル値 */
-scroll-margin-inline-end: inherit;
-scroll-margin-inline-end: initial;
-scroll-margin-inline-end: unset;
-
- -

値

- -
-
<length>
-
スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-margin-inline-end")}}

diff --git a/files/ja/web/css/scroll-margin-inline-end/index.md b/files/ja/web/css/scroll-margin-inline-end/index.md new file mode 100644 index 0000000000..7047a4c8fa --- /dev/null +++ b/files/ja/web/css/scroll-margin-inline-end/index.md @@ -0,0 +1,66 @@ +--- +title: scroll-margin-inline-end +slug: Web/CSS/scroll-margin-inline-end +tags: + - Advanced + - CSS + - NeedsExample + - Reference + - 上級者 +translation_of: Web/CSS/scroll-margin-inline-end +--- +
{{CSSRef}}
+ +

scroll-margin-inline-end プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin-inline-end: 10px;
+scroll-margin-inline-end: 1em;
+
+/* グローバル値 */
+scroll-margin-inline-end: inherit;
+scroll-margin-inline-end: initial;
+scroll-margin-inline-end: unset;
+
+ +

値

+ +
+
<length>
+
スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-margin-inline-end")}}

diff --git a/files/ja/web/css/scroll-margin-inline-start/index.html b/files/ja/web/css/scroll-margin-inline-start/index.html deleted file mode 100644 index 18090254ea..0000000000 --- a/files/ja/web/css/scroll-margin-inline-start/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: scroll-margin-inline-start -slug: Web/CSS/scroll-margin-inline-start -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-margin-inline - - scroll-margin-inline-start -translation_of: Web/CSS/scroll-margin-inline-start ---- -
{{CSSRef}}
- -

scroll-margin-inline-start プロパティは、スクロールスナップ領域のインライン方向における開始側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

- -
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin-inline-start: 10px;
-scroll-margin-inline-start: 1em;
-
-/* グローバル値 */
-scroll-margin-inline-start: inherit;
-scroll-margin-inline-start: initial;
-scroll-margin-inline-start: unset;
-
- -

値

- -
-
<length>
-
スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-margin-inline-start")}}

diff --git a/files/ja/web/css/scroll-margin-inline-start/index.md b/files/ja/web/css/scroll-margin-inline-start/index.md new file mode 100644 index 0000000000..18090254ea --- /dev/null +++ b/files/ja/web/css/scroll-margin-inline-start/index.md @@ -0,0 +1,68 @@ +--- +title: scroll-margin-inline-start +slug: Web/CSS/scroll-margin-inline-start +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - Web + - scroll-margin-inline + - scroll-margin-inline-start +translation_of: Web/CSS/scroll-margin-inline-start +--- +
{{CSSRef}}
+ +

scroll-margin-inline-start プロパティは、スクロールスナップ領域のインライン方向における開始側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin-inline-start: 10px;
+scroll-margin-inline-start: 1em;
+
+/* グローバル値 */
+scroll-margin-inline-start: inherit;
+scroll-margin-inline-start: initial;
+scroll-margin-inline-start: unset;
+
+ +

値

+ +
+
<length>
+
スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-margin-inline-start")}}

diff --git a/files/ja/web/css/scroll-margin-inline/index.html b/files/ja/web/css/scroll-margin-inline/index.html deleted file mode 100644 index 06d1900196..0000000000 --- a/files/ja/web/css/scroll-margin-inline/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: scroll-margin-inline -slug: Web/CSS/scroll-margin-inline -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-margin - - scroll-margin-inline -translation_of: Web/CSS/scroll-margin-inline ---- -
{{CSSRef}}
- -

scroll-margin-inline プロパティは、インライン方向の scroll-margin の個別指定を設定する一括指定プロパティです。

- -

scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

- -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin-inline: 10px;
-scroll-margin-inline: 1em .5em ;
-
-/* グローバル値 */
-scroll-margin-inline: inherit;
-scroll-margin-inline: initial;
-scroll-margin-inline: unset;
-
- -

値

- -
-
<length>
-
スクロールコンテナーの対応する辺からの距離です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-margin-inline")}}

diff --git a/files/ja/web/css/scroll-margin-inline/index.md b/files/ja/web/css/scroll-margin-inline/index.md new file mode 100644 index 0000000000..06d1900196 --- /dev/null +++ b/files/ja/web/css/scroll-margin-inline/index.md @@ -0,0 +1,66 @@ +--- +title: scroll-margin-inline +slug: Web/CSS/scroll-margin-inline +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - Web + - scroll-margin + - scroll-margin-inline +translation_of: Web/CSS/scroll-margin-inline +--- +
{{CSSRef}}
+ +

scroll-margin-inline プロパティは、インライン方向の scroll-margin の個別指定を設定する一括指定プロパティです。

+ +

scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+ +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin-inline: 10px;
+scroll-margin-inline: 1em .5em ;
+
+/* グローバル値 */
+scroll-margin-inline: inherit;
+scroll-margin-inline: initial;
+scroll-margin-inline: unset;
+
+ +

値

+ +
+
<length>
+
スクロールコンテナーの対応する辺からの距離です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-margin-inline")}}

diff --git a/files/ja/web/css/scroll-margin-left/index.html b/files/ja/web/css/scroll-margin-left/index.html deleted file mode 100644 index f9c243e949..0000000000 --- a/files/ja/web/css/scroll-margin-left/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: scroll-margin-left -slug: Web/CSS/scroll-margin-left -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Scroll margin left - - Web - - scroll-margin - - scroll-margin-left -translation_of: Web/CSS/scroll-margin-left ---- -
{{CSSRef}}
- -

scroll-margin-left プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

- -
{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin-left: 10px;
-scroll-margin-left: 1em;
-
-/* グローバル値 */
-scroll-margin-left: inherit;
-scroll-margin-left: initial;
-scroll-margin-left: unset;
-
- -

値

- -
-
<length>
-
スクロールコンテナーの左側の辺からみた外部の距離です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-margin-left")}}

diff --git a/files/ja/web/css/scroll-margin-left/index.md b/files/ja/web/css/scroll-margin-left/index.md new file mode 100644 index 0000000000..f9c243e949 --- /dev/null +++ b/files/ja/web/css/scroll-margin-left/index.md @@ -0,0 +1,69 @@ +--- +title: scroll-margin-left +slug: Web/CSS/scroll-margin-left +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - Scroll margin left + - Web + - scroll-margin + - scroll-margin-left +translation_of: Web/CSS/scroll-margin-left +--- +
{{CSSRef}}
+ +

scroll-margin-left プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin-left: 10px;
+scroll-margin-left: 1em;
+
+/* グローバル値 */
+scroll-margin-left: inherit;
+scroll-margin-left: initial;
+scroll-margin-left: unset;
+
+ +

値

+ +
+
<length>
+
スクロールコンテナーの左側の辺からみた外部の距離です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-margin-left")}}

diff --git a/files/ja/web/css/scroll-margin-right/index.html b/files/ja/web/css/scroll-margin-right/index.html deleted file mode 100644 index a04c35e12e..0000000000 --- a/files/ja/web/css/scroll-margin-right/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: scroll-margin-right -slug: Web/CSS/scroll-margin-right -tags: - - CSS - - CSS Property - - Reference - - Web - - scroll-margin - - scroll-margin-right -translation_of: Web/CSS/scroll-margin-right ---- -
{{CSSRef}}
- -

scroll-margin-right プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

- -
{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin-right: 10px;
-scroll-margin-right: 1em;
-
-/* グローバル値 */
-scroll-margin-right: inherit;
-scroll-margin-right: initial;
-scroll-margin-right: unset;
-
- -

値

- -
-
<length>
-
スクロールコンテナーの右側の辺からみた外部の距離です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-margin-right")}}

diff --git a/files/ja/web/css/scroll-margin-right/index.md b/files/ja/web/css/scroll-margin-right/index.md new file mode 100644 index 0000000000..a04c35e12e --- /dev/null +++ b/files/ja/web/css/scroll-margin-right/index.md @@ -0,0 +1,67 @@ +--- +title: scroll-margin-right +slug: Web/CSS/scroll-margin-right +tags: + - CSS + - CSS Property + - Reference + - Web + - scroll-margin + - scroll-margin-right +translation_of: Web/CSS/scroll-margin-right +--- +
{{CSSRef}}
+ +

scroll-margin-right プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin-right: 10px;
+scroll-margin-right: 1em;
+
+/* グローバル値 */
+scroll-margin-right: inherit;
+scroll-margin-right: initial;
+scroll-margin-right: unset;
+
+ +

値

+ +
+
<length>
+
スクロールコンテナーの右側の辺からみた外部の距離です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-margin-right")}}

diff --git a/files/ja/web/css/scroll-margin-top/index.html b/files/ja/web/css/scroll-margin-top/index.html deleted file mode 100644 index 04f356c5c5..0000000000 --- a/files/ja/web/css/scroll-margin-top/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: scroll-margin-top -slug: Web/CSS/scroll-margin-top -tags: - - CSS - - CSS Property - - CodingScripting - - Reference - - Web - - scroll-margin - - scroll-margin-top -translation_of: Web/CSS/scroll-margin-top ---- -
{{CSSRef}}
- -

scroll-margin-top プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

- -
{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin-top: 10px;
-scroll-margin-top: 1em;
-
-/* グローバル値 */
-scroll-margin-top: inherit;
-scroll-margin-top: initial;
-scroll-margin-top: unset;
-
- -

値

- -
-
<length>
-
スクロールコンテナーの上側の辺からみた外部の距離です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-margin-top")}}

diff --git a/files/ja/web/css/scroll-margin-top/index.md b/files/ja/web/css/scroll-margin-top/index.md new file mode 100644 index 0000000000..04f356c5c5 --- /dev/null +++ b/files/ja/web/css/scroll-margin-top/index.md @@ -0,0 +1,68 @@ +--- +title: scroll-margin-top +slug: Web/CSS/scroll-margin-top +tags: + - CSS + - CSS Property + - CodingScripting + - Reference + - Web + - scroll-margin + - scroll-margin-top +translation_of: Web/CSS/scroll-margin-top +--- +
{{CSSRef}}
+ +

scroll-margin-top プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin-top: 10px;
+scroll-margin-top: 1em;
+
+/* グローバル値 */
+scroll-margin-top: inherit;
+scroll-margin-top: initial;
+scroll-margin-top: unset;
+
+ +

値

+ +
+
<length>
+
スクロールコンテナーの上側の辺からみた外部の距離です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-margin-top")}}

diff --git a/files/ja/web/css/scroll-margin/index.html b/files/ja/web/css/scroll-margin/index.html deleted file mode 100644 index d604272ca1..0000000000 --- a/files/ja/web/css/scroll-margin/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: scroll-margin -slug: Web/CSS/scroll-margin -tags: - - CSS - - Reference - - scroll-margin -translation_of: Web/CSS/scroll-margin ---- -
{{CSSRef}}
- -

scroll-margin プロパティは一括指定プロパティであり、すべての個別指定の scroll-margin プロパティに対して、ちょうど margin プロパティが個別指定の margin-* に値を割り当てるように、値を割り当てます。

- -

scroll-margin の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。

- -

{{cssinfo}}

- -

構文

- -
/* <length> 値 */
-scroll-margin: 10px;
-scroll-margin: 1em .5em 1em 1em;
-
-/* グローバル値 */
-scroll-margin: inherit;
-scroll-margin: initial;
-scroll-margin: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
スクロールコンテナーの辺からの張り出し部分です。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.scroll-margin")}}

diff --git a/files/ja/web/css/scroll-margin/index.md b/files/ja/web/css/scroll-margin/index.md new file mode 100644 index 0000000000..d604272ca1 --- /dev/null +++ b/files/ja/web/css/scroll-margin/index.md @@ -0,0 +1,62 @@ +--- +title: scroll-margin +slug: Web/CSS/scroll-margin +tags: + - CSS + - Reference + - scroll-margin +translation_of: Web/CSS/scroll-margin +--- +
{{CSSRef}}
+ +

scroll-margin プロパティは一括指定プロパティであり、すべての個別指定の scroll-margin プロパティに対して、ちょうど margin プロパティが個別指定の margin-* に値を割り当てるように、値を割り当てます。

+ +

scroll-margin の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。

+ +

{{cssinfo}}

+ +

構文

+ +
/* <length> 値 */
+scroll-margin: 10px;
+scroll-margin: 1em .5em 1em 1em;
+
+/* グローバル値 */
+scroll-margin: inherit;
+scroll-margin: initial;
+scroll-margin: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
スクロールコンテナーの辺からの張り出し部分です。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.properties.scroll-margin")}}

diff --git a/files/ja/web/css/scroll-padding-block-end/index.html b/files/ja/web/css/scroll-padding-block-end/index.html deleted file mode 100644 index 55373c9991..0000000000 --- a/files/ja/web/css/scroll-padding-block-end/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: scroll-padding-block-end -slug: Web/CSS/scroll-padding-block-end -tags: - - CSS - - CSS Property - - Reference - - Web - - 'recipe:css-property' - - scroll-padding-block - - scroll-padding-block-end -translation_of: Web/CSS/scroll-padding-block-end ---- -
{{CSSRef}}
- -

scroll-padding-block-end プロパティは、スクロールポートの最適表示領域のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}
- - - -

構文

- -
/* キーワード値 */
-scroll-padding-block-end: auto;
-
-/* <length> 値 */
-scroll-padding-block-end: 10px;
-scroll-padding-block-end: 1em;
-scroll-padding-block-end: 10%;
-
-/* グローバル値 */
-scroll-padding-block-end: inherit;
-scroll-padding-block-end: initial;
-scroll-padding-block-end: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-block-end")}}

diff --git a/files/ja/web/css/scroll-padding-block-end/index.md b/files/ja/web/css/scroll-padding-block-end/index.md new file mode 100644 index 0000000000..55373c9991 --- /dev/null +++ b/files/ja/web/css/scroll-padding-block-end/index.md @@ -0,0 +1,76 @@ +--- +title: scroll-padding-block-end +slug: Web/CSS/scroll-padding-block-end +tags: + - CSS + - CSS Property + - Reference + - Web + - 'recipe:css-property' + - scroll-padding-block + - scroll-padding-block-end +translation_of: Web/CSS/scroll-padding-block-end +--- +
{{CSSRef}}
+ +

scroll-padding-block-end プロパティは、スクロールポートの最適表示領域のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+scroll-padding-block-end: auto;
+
+/* <length> 値 */
+scroll-padding-block-end: 10px;
+scroll-padding-block-end: 1em;
+scroll-padding-block-end: 10%;
+
+/* グローバル値 */
+scroll-padding-block-end: inherit;
+scroll-padding-block-end: initial;
+scroll-padding-block-end: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-block-end")}}

diff --git a/files/ja/web/css/scroll-padding-block-start/index.html b/files/ja/web/css/scroll-padding-block-start/index.html deleted file mode 100644 index 4094bd5b12..0000000000 --- a/files/ja/web/css/scroll-padding-block-start/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: scroll-padding-block-start -slug: Web/CSS/scroll-padding-block-start -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-padding-block - - scroll-padding-block-start -translation_of: Web/CSS/scroll-padding-block-start ---- -
{{CSSRef}}
- -

scroll-padding-block-start プロパティは、スクロールポートの最適表示領域のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-block-start: auto;
-
-/* <length> 値 */
-scroll-padding-block-start: 10px;
-scroll-padding-block-start: 1em;
-scroll-padding-block-start: 10%;
-
-/* グローバル値 */
-scroll-padding-block-start: inherit;
-scroll-padding-block-start: initial;
-scroll-padding-block-start: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-block-start")}}

diff --git a/files/ja/web/css/scroll-padding-block-start/index.md b/files/ja/web/css/scroll-padding-block-start/index.md new file mode 100644 index 0000000000..4094bd5b12 --- /dev/null +++ b/files/ja/web/css/scroll-padding-block-start/index.md @@ -0,0 +1,74 @@ +--- +title: scroll-padding-block-start +slug: Web/CSS/scroll-padding-block-start +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - Web + - scroll-padding-block + - scroll-padding-block-start +translation_of: Web/CSS/scroll-padding-block-start +--- +
{{CSSRef}}
+ +

scroll-padding-block-start プロパティは、スクロールポートの最適表示領域のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-block-start: auto;
+
+/* <length> 値 */
+scroll-padding-block-start: 10px;
+scroll-padding-block-start: 1em;
+scroll-padding-block-start: 10%;
+
+/* グローバル値 */
+scroll-padding-block-start: inherit;
+scroll-padding-block-start: initial;
+scroll-padding-block-start: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-block-start")}}

diff --git a/files/ja/web/css/scroll-padding-block/index.html b/files/ja/web/css/scroll-padding-block/index.html deleted file mode 100644 index 7a0916cbb3..0000000000 --- a/files/ja/web/css/scroll-padding-block/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: scroll-padding-block -slug: Web/CSS/scroll-padding-block -tags: - - CSS - - CSS Scroll Snap - - Property - - Reference - - Web - - scroll-padding - - scroll-padding-block -translation_of: Web/CSS/scroll-padding-block ---- -
{{CSSRef}}
- -

scroll-padding-block プロパティは、ブロック軸の scroll-padding 個別指定を設定する一括指定プロパティです。

- -

scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-block: auto;
-
-/* <length> 値 */
-scroll-padding-block: 10px;
-scroll-padding-block: 1em .5em;
-scroll-padding-block: 10%;
-
-/* グローバル値 */
-scroll-padding-block: inherit;
-scroll-padding-block: initial;
-scroll-padding-block: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.scroll-padding-block")}}

diff --git a/files/ja/web/css/scroll-padding-block/index.md b/files/ja/web/css/scroll-padding-block/index.md new file mode 100644 index 0000000000..7a0916cbb3 --- /dev/null +++ b/files/ja/web/css/scroll-padding-block/index.md @@ -0,0 +1,72 @@ +--- +title: scroll-padding-block +slug: Web/CSS/scroll-padding-block +tags: + - CSS + - CSS Scroll Snap + - Property + - Reference + - Web + - scroll-padding + - scroll-padding-block +translation_of: Web/CSS/scroll-padding-block +--- +
{{CSSRef}}
+ +

scroll-padding-block プロパティは、ブロック軸の scroll-padding 個別指定を設定する一括指定プロパティです。

+ +

scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-block: auto;
+
+/* <length> 値 */
+scroll-padding-block: 10px;
+scroll-padding-block: 1em .5em;
+scroll-padding-block: 10%;
+
+/* グローバル値 */
+scroll-padding-block: inherit;
+scroll-padding-block: initial;
+scroll-padding-block: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.properties.scroll-padding-block")}}

diff --git a/files/ja/web/css/scroll-padding-bottom/index.html b/files/ja/web/css/scroll-padding-bottom/index.html deleted file mode 100644 index cb4b2198af..0000000000 --- a/files/ja/web/css/scroll-padding-bottom/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: scroll-padding-bottom -slug: Web/CSS/scroll-padding-bottom -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-padding - - scroll-padding-bottom -translation_of: Web/CSS/scroll-padding-bottom ---- -
{{CSSRef}}
- -

scroll-padding-bottom プロパティは、スクロールポートの最適表示領域の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-bottom: auto;
-
-/* <length> 値 */
-scroll-padding-bottom: 10px;
-scroll-padding-bottom: 1em;
-scroll-padding-bottom: 10%;
-
-/* グローバル値 */
-scroll-padding-bottom: inherit;
-scroll-padding-bottom: initial;
-scroll-padding-bottom: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-bottom")}}

diff --git a/files/ja/web/css/scroll-padding-bottom/index.md b/files/ja/web/css/scroll-padding-bottom/index.md new file mode 100644 index 0000000000..cb4b2198af --- /dev/null +++ b/files/ja/web/css/scroll-padding-bottom/index.md @@ -0,0 +1,74 @@ +--- +title: scroll-padding-bottom +slug: Web/CSS/scroll-padding-bottom +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - Web + - scroll-padding + - scroll-padding-bottom +translation_of: Web/CSS/scroll-padding-bottom +--- +
{{CSSRef}}
+ +

scroll-padding-bottom プロパティは、スクロールポートの最適表示領域の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-bottom: auto;
+
+/* <length> 値 */
+scroll-padding-bottom: 10px;
+scroll-padding-bottom: 1em;
+scroll-padding-bottom: 10%;
+
+/* グローバル値 */
+scroll-padding-bottom: inherit;
+scroll-padding-bottom: initial;
+scroll-padding-bottom: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-bottom")}}

diff --git a/files/ja/web/css/scroll-padding-inline-end/index.html b/files/ja/web/css/scroll-padding-inline-end/index.html deleted file mode 100644 index 5e977ca930..0000000000 --- a/files/ja/web/css/scroll-padding-inline-end/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: scroll-padding-inline-end -slug: Web/CSS/scroll-padding-inline-end -tags: - - CSS - - CSS Property - - CSS プロパティ - - Web - - scroll-padding-inline - - scroll-padding-inline-end -translation_of: Web/CSS/scroll-padding-inline-end ---- -
{{CSSRef}}
- -

scroll-padding-inline-end プロパティは、スクロールポートの最適表示領域のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-inline-end: auto;
-
-/* <length> 値 */
-scroll-padding-inline-end: 10px;
-scroll-padding-inline-end: 1em;
-scroll-padding-inline-end: 10%;
-
-/* グローバル値 */
-scroll-padding-inline-end: inherit;
-scroll-padding-inline-end: initial;
-scroll-padding-inline-end: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-inline-end")}}

diff --git a/files/ja/web/css/scroll-padding-inline-end/index.md b/files/ja/web/css/scroll-padding-inline-end/index.md new file mode 100644 index 0000000000..5e977ca930 --- /dev/null +++ b/files/ja/web/css/scroll-padding-inline-end/index.md @@ -0,0 +1,73 @@ +--- +title: scroll-padding-inline-end +slug: Web/CSS/scroll-padding-inline-end +tags: + - CSS + - CSS Property + - CSS プロパティ + - Web + - scroll-padding-inline + - scroll-padding-inline-end +translation_of: Web/CSS/scroll-padding-inline-end +--- +
{{CSSRef}}
+ +

scroll-padding-inline-end プロパティは、スクロールポートの最適表示領域のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-inline-end: auto;
+
+/* <length> 値 */
+scroll-padding-inline-end: 10px;
+scroll-padding-inline-end: 1em;
+scroll-padding-inline-end: 10%;
+
+/* グローバル値 */
+scroll-padding-inline-end: inherit;
+scroll-padding-inline-end: initial;
+scroll-padding-inline-end: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-inline-end")}}

diff --git a/files/ja/web/css/scroll-padding-inline-start/index.html b/files/ja/web/css/scroll-padding-inline-start/index.html deleted file mode 100644 index 72596cabe7..0000000000 --- a/files/ja/web/css/scroll-padding-inline-start/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: scroll-padding-inline-start -slug: Web/CSS/scroll-padding-inline-start -tags: - - CSS - - CSS Property - - CSS プロパティ - - Web - - scroll-padding-inline - - scroll-padding-inline-start -translation_of: Web/CSS/scroll-padding-inline-start ---- -
{{CSSRef}}
- -

scroll-padding-inline-start プロパティは、スクロールポートの最適表示領域のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-inline-start: auto;
-
-/* <length> 値 */
-scroll-padding-inline-start: 10px;
-scroll-padding-inline-start: 1em;
-scroll-padding-inline-start: 10%;
-
-/* グローバル値 */
-scroll-padding-inline-start: inherit;
-scroll-padding-inline-start: initial;
-scroll-padding-inline-start: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-inline-start")}}

diff --git a/files/ja/web/css/scroll-padding-inline-start/index.md b/files/ja/web/css/scroll-padding-inline-start/index.md new file mode 100644 index 0000000000..72596cabe7 --- /dev/null +++ b/files/ja/web/css/scroll-padding-inline-start/index.md @@ -0,0 +1,73 @@ +--- +title: scroll-padding-inline-start +slug: Web/CSS/scroll-padding-inline-start +tags: + - CSS + - CSS Property + - CSS プロパティ + - Web + - scroll-padding-inline + - scroll-padding-inline-start +translation_of: Web/CSS/scroll-padding-inline-start +--- +
{{CSSRef}}
+ +

scroll-padding-inline-start プロパティは、スクロールポートの最適表示領域のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-inline-start: auto;
+
+/* <length> 値 */
+scroll-padding-inline-start: 10px;
+scroll-padding-inline-start: 1em;
+scroll-padding-inline-start: 10%;
+
+/* グローバル値 */
+scroll-padding-inline-start: inherit;
+scroll-padding-inline-start: initial;
+scroll-padding-inline-start: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-inline-start")}}

diff --git a/files/ja/web/css/scroll-padding-inline/index.html b/files/ja/web/css/scroll-padding-inline/index.html deleted file mode 100644 index 21ed10d7e4..0000000000 --- a/files/ja/web/css/scroll-padding-inline/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: scroll-padding-inline -slug: Web/CSS/scroll-padding-inline -tags: - - CSS - - CSS Property - - Reference - - Web - - scroll-padding-inline - - scroll-padding-inline-end - - scroll-padding-inline-start -translation_of: Web/CSS/scroll-padding-inline ---- -
{{CSSRef}}
- -

scroll-padding-inline プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}
- - - -

scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-inline: auto;
-
-/* <length> 値 */
-scroll-padding-inline: 10px;
-scroll-padding-inline: 1em .5em;
-scroll-padding-inline: 10%;
-
-/* グローバル値 */
-scroll-padding-inline: inherit;
-scroll-padding-inline: initial;
-scroll-padding-inline: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-inline")}}

diff --git a/files/ja/web/css/scroll-padding-inline/index.md b/files/ja/web/css/scroll-padding-inline/index.md new file mode 100644 index 0000000000..21ed10d7e4 --- /dev/null +++ b/files/ja/web/css/scroll-padding-inline/index.md @@ -0,0 +1,76 @@ +--- +title: scroll-padding-inline +slug: Web/CSS/scroll-padding-inline +tags: + - CSS + - CSS Property + - Reference + - Web + - scroll-padding-inline + - scroll-padding-inline-end + - scroll-padding-inline-start +translation_of: Web/CSS/scroll-padding-inline +--- +
{{CSSRef}}
+ +

scroll-padding-inline プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}
+ + + +

scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-inline: auto;
+
+/* <length> 値 */
+scroll-padding-inline: 10px;
+scroll-padding-inline: 1em .5em;
+scroll-padding-inline: 10%;
+
+/* グローバル値 */
+scroll-padding-inline: inherit;
+scroll-padding-inline: initial;
+scroll-padding-inline: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-inline")}}

diff --git a/files/ja/web/css/scroll-padding-left/index.html b/files/ja/web/css/scroll-padding-left/index.html deleted file mode 100644 index 8a70079ed2..0000000000 --- a/files/ja/web/css/scroll-padding-left/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: scroll-padding-left -slug: Web/CSS/scroll-padding-left -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - scroll-padding - - scroll-padding-left -translation_of: Web/CSS/scroll-padding-left ---- -
{{CSSRef}}
- -

scroll-padding-left プロパティは、スクロールポートの最適表示領域の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-left: auto;
-
-/* <length> 値 */
-scroll-padding-left: 10px;
-scroll-padding-left: 1em;
-scroll-padding-left: 10%;
-
-/* グローバル値 */
-scroll-padding-left: inherit;
-scroll-padding-left: initial;
-scroll-padding-left: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-left")}}

diff --git a/files/ja/web/css/scroll-padding-left/index.md b/files/ja/web/css/scroll-padding-left/index.md new file mode 100644 index 0000000000..8a70079ed2 --- /dev/null +++ b/files/ja/web/css/scroll-padding-left/index.md @@ -0,0 +1,73 @@ +--- +title: scroll-padding-left +slug: Web/CSS/scroll-padding-left +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - scroll-padding + - scroll-padding-left +translation_of: Web/CSS/scroll-padding-left +--- +
{{CSSRef}}
+ +

scroll-padding-left プロパティは、スクロールポートの最適表示領域の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-left: auto;
+
+/* <length> 値 */
+scroll-padding-left: 10px;
+scroll-padding-left: 1em;
+scroll-padding-left: 10%;
+
+/* グローバル値 */
+scroll-padding-left: inherit;
+scroll-padding-left: initial;
+scroll-padding-left: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-left")}}

diff --git a/files/ja/web/css/scroll-padding-right/index.html b/files/ja/web/css/scroll-padding-right/index.html deleted file mode 100644 index c9d2181584..0000000000 --- a/files/ja/web/css/scroll-padding-right/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: scroll-padding-right -slug: Web/CSS/scroll-padding-right -tags: - - CSS - - Reference - - Web - - scroll-padding - - scroll-padding-right -translation_of: Web/CSS/scroll-padding-right ---- -
{{CSSRef}}
- -

scroll-padding-right プロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-right: auto;
-
-/* <length> 値 */
-scroll-padding-right: 10px;
-scroll-padding-right: 1em;
-scroll-padding-right: 10%;
-
-/* グローバル値 */
-scroll-padding-right: inherit;
-scroll-padding-right: initial;
-scroll-padding-right: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-right")}}

diff --git a/files/ja/web/css/scroll-padding-right/index.md b/files/ja/web/css/scroll-padding-right/index.md new file mode 100644 index 0000000000..c9d2181584 --- /dev/null +++ b/files/ja/web/css/scroll-padding-right/index.md @@ -0,0 +1,72 @@ +--- +title: scroll-padding-right +slug: Web/CSS/scroll-padding-right +tags: + - CSS + - Reference + - Web + - scroll-padding + - scroll-padding-right +translation_of: Web/CSS/scroll-padding-right +--- +
{{CSSRef}}
+ +

scroll-padding-right プロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-right: auto;
+
+/* <length> 値 */
+scroll-padding-right: 10px;
+scroll-padding-right: 1em;
+scroll-padding-right: 10%;
+
+/* グローバル値 */
+scroll-padding-right: inherit;
+scroll-padding-right: initial;
+scroll-padding-right: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-right")}}

diff --git a/files/ja/web/css/scroll-padding-top/index.html b/files/ja/web/css/scroll-padding-top/index.html deleted file mode 100644 index f352156457..0000000000 --- a/files/ja/web/css/scroll-padding-top/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: scroll-padding-top -slug: Web/CSS/scroll-padding-top -tags: - - CSS - - Reference - - Web - - scroll-padding - - scroll-padding-top -translation_of: Web/CSS/scroll-padding-top ---- -
{{CSSRef}}
- -

scroll-padding-top プロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}
- - - -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-padding-top: auto;
-
-/* <length> 値 */
-scroll-padding-top: 10px;
-scroll-padding-top: 1em;
-scroll-padding-top: 10%;
-
-/* グローバル値 */
-scroll-padding-top: inherit;
-scroll-padding-top: initial;
-scroll-padding-top: unset;
-
- -

値

- -
-
<length-percentage>
-
スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。
-
auto
-
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding-top")}}

diff --git a/files/ja/web/css/scroll-padding-top/index.md b/files/ja/web/css/scroll-padding-top/index.md new file mode 100644 index 0000000000..f352156457 --- /dev/null +++ b/files/ja/web/css/scroll-padding-top/index.md @@ -0,0 +1,72 @@ +--- +title: scroll-padding-top +slug: Web/CSS/scroll-padding-top +tags: + - CSS + - Reference + - Web + - scroll-padding + - scroll-padding-top +translation_of: Web/CSS/scroll-padding-top +--- +
{{CSSRef}}
+ +

scroll-padding-top プロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-padding-top: auto;
+
+/* <length> 値 */
+scroll-padding-top: 10px;
+scroll-padding-top: 1em;
+scroll-padding-top: 10%;
+
+/* グローバル値 */
+scroll-padding-top: inherit;
+scroll-padding-top: initial;
+scroll-padding-top: unset;
+
+ +

値

+ +
+
<length-percentage>
+
スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+
auto
+
オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding-top")}}

diff --git a/files/ja/web/css/scroll-padding/index.html b/files/ja/web/css/scroll-padding/index.html deleted file mode 100644 index 5de5104bbb..0000000000 --- a/files/ja/web/css/scroll-padding/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: scroll-padding -slug: Web/CSS/scroll-padding -tags: - - CSS - - CSS Property - - 'recipe:css-shorthand-property' - - scroll-snap -translation_of: Web/CSS/scroll-padding ---- -
{{CSSRef}}
- -

scroll-padding は一括指定プロパティで、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。

- -
{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}
- - - -

scroll-padding-* プロパティは、スクロールポートの最適な表示領域のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。

- -

構成するプロパティ

- -

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

- -
    -
  • {{cssxref("scroll-padding-bottom")}}
    • -
  • {{cssxref("scroll-padding-left")}}
    • -
  • {{cssxref("scroll-padding-right")}}
    • -
  • {{cssxref("scroll-padding-top")}}
    • -
- -

構文

- -
/* キーワード値 */
-scroll-padding: auto;
-
-/* <length> 値 */
-scroll-padding: 10px;
-scroll-padding: 1em .5em 1em 1em;
-scroll-padding: 10%;
-
-/* グローバル値 */
-scroll-padding: inherit;
-scroll-padding: initial;
-scroll-padding: unset;
-
- -

値

- -
-
{{cssxref("<length-percentage>")}}
-
スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("<length>")}} または {{cssxref("<percentage>")}} として指定します。
-
auto
-
オフセットがユーザーエージェントによって決定されます。これは一般的には 0px になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-padding")}}

diff --git a/files/ja/web/css/scroll-padding/index.md b/files/ja/web/css/scroll-padding/index.md new file mode 100644 index 0000000000..5de5104bbb --- /dev/null +++ b/files/ja/web/css/scroll-padding/index.md @@ -0,0 +1,86 @@ +--- +title: scroll-padding +slug: Web/CSS/scroll-padding +tags: + - CSS + - CSS Property + - 'recipe:css-shorthand-property' + - scroll-snap +translation_of: Web/CSS/scroll-padding +--- +
{{CSSRef}}
+ +

scroll-padding は一括指定プロパティで、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}
+ + + +

scroll-padding-* プロパティは、スクロールポートの最適な表示領域のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。

+ +

構成するプロパティ

+ +

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

+ +
    +
  • {{cssxref("scroll-padding-bottom")}}
    • +
  • {{cssxref("scroll-padding-left")}}
    • +
  • {{cssxref("scroll-padding-right")}}
    • +
  • {{cssxref("scroll-padding-top")}}
    • +
+ +

構文

+ +
/* キーワード値 */
+scroll-padding: auto;
+
+/* <length> 値 */
+scroll-padding: 10px;
+scroll-padding: 1em .5em 1em 1em;
+scroll-padding: 10%;
+
+/* グローバル値 */
+scroll-padding: inherit;
+scroll-padding: initial;
+scroll-padding: unset;
+
+ +

値

+ +
+
{{cssxref("<length-percentage>")}}
+
スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("<length>")}} または {{cssxref("<percentage>")}} として指定します。
+
auto
+
オフセットがユーザーエージェントによって決定されます。これは一般的には 0px になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-padding")}}

diff --git a/files/ja/web/css/scroll-snap-align/index.html b/files/ja/web/css/scroll-snap-align/index.html deleted file mode 100644 index 09909e000c..0000000000 --- a/files/ja/web/css/scroll-snap-align/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: scroll-snap-align -slug: Web/CSS/scroll-snap-align -tags: - - Advanced - - CSS - - Example - - NeedsLiveSample - - Reference - - 上級者 -translation_of: Web/CSS/scroll-snap-align ---- -
{{CSSRef}}
- -

scroll-snap-align プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。

- -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scroll-snap-align: none;
-scroll-snap-align: start end; /* 2つの値を指定すると、1番目がブロック、2番目がインラインとなる */
-scroll-snap-align: center;
-
-/* グローバル値 */
-scroll-snap-align: inherit;
-scroll-snap-align: initial;
-scroll-snap-align: unset;
-
- -

値

- -
-
none
-
このボックスでは、その軸のスナップ位置を定義しません。
-
start
-
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。
-
end
-
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。
-
center
-
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。
-
- -

形式文法

- -{{csssyntax}} - -
-

Safari は現在のところ、値2つの構文が誤った順になっており、1番目の値がインラインで2番目の値がブロックになっています。 バグ #191865 を参照してください。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-snap-align")}}

diff --git a/files/ja/web/css/scroll-snap-align/index.md b/files/ja/web/css/scroll-snap-align/index.md new file mode 100644 index 0000000000..09909e000c --- /dev/null +++ b/files/ja/web/css/scroll-snap-align/index.md @@ -0,0 +1,74 @@ +--- +title: scroll-snap-align +slug: Web/CSS/scroll-snap-align +tags: + - Advanced + - CSS + - Example + - NeedsLiveSample + - Reference + - 上級者 +translation_of: Web/CSS/scroll-snap-align +--- +
{{CSSRef}}
+ +

scroll-snap-align プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scroll-snap-align: none;
+scroll-snap-align: start end; /* 2つの値を指定すると、1番目がブロック、2番目がインラインとなる */
+scroll-snap-align: center;
+
+/* グローバル値 */
+scroll-snap-align: inherit;
+scroll-snap-align: initial;
+scroll-snap-align: unset;
+
+ +

値

+ +
+
none
+
このボックスでは、その軸のスナップ位置を定義しません。
+
start
+
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。
+
end
+
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。
+
center
+
このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。
+
+ +

形式文法

+ +{{csssyntax}} + +
+

Safari は現在のところ、値2つの構文が誤った順になっており、1番目の値がインラインで2番目の値がブロックになっています。 バグ #191865 を参照してください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scroll-snap-align")}}

diff --git a/files/ja/web/css/scroll-snap-stop/index.html b/files/ja/web/css/scroll-snap-stop/index.html deleted file mode 100644 index b9f4d8b80b..0000000000 --- a/files/ja/web/css/scroll-snap-stop/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: scroll-snap-stop -slug: Web/CSS/scroll-snap-stop -tags: - - CSS - - CSS スクロールスナップ - - Reference - - scroll-snap-stop - - ウェブ -translation_of: Web/CSS/scroll-snap-stop ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の scroll-snap-stop プロパティは、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。

- -
/* キーワード値 */
-scroll-snap-stop: normal;
-scroll-snap-stop: always;
-
-/* グローバル値 */
-scroll-snap-type: inherit;
-scroll-snap-type: initial;
-scroll-snap-type: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
normal
-
スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことがあります。
-
always
-
スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことはありません。最初の要素のスナップ位置にスナップします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。

- -

CSS

- -
/* setup */
-:root, body {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-flow: column nowrap;
-  font-family: monospace;
-}
-.container {
-  display: flex;
-  overflow: auto;
-  outline: 1px dashed lightgray;
-  flex: none;
-}
-
-.container.x {
-  width: 100%;
-  height: 128px;
-  flex-flow: row nowrap;
-}
-
-.container.y {
-  width: 256px;
-  height: 256px;
-  flex-flow: column nowrap;
-}
-/* definite scroll snap */
-.mandatory-scroll-snapping {
-  scroll-snap-stop: always;
-}
-.proximity-scroll-snapping {
-  scroll-snap-stop: normal;
-}
-/* scroll-snap */
-.x.mandatory-scroll-snapping {
-  scroll-snap-type: x mandatory;
-}
-
-.y.mandatory-scroll-snapping {
-  scroll-snap-type: y mandatory;
-}
-
-.x.proximity-scroll-snapping {
-  scroll-snap-type: x proximity;
-}
-
-.y.proximity-scroll-snapping {
-  scroll-snap-type: y proximity;
-}
-
-.container > div {
-  text-align: center;
-  scroll-snap-align: center;
-  flex: none;
-}
-
-.x.container > div {
-  line-height: 128px;
-  font-size: 64px;
-  width: 100%;
-  height: 128px;
-}
-
-.y.container > div {
-  line-height: 256px;
-  font-size: 128px;
-  width: 256px;
-  height: 256px;
-}
-/* appearance fixes */
-.y.container > div:first-child {
-  line-height: 1.3;
-  font-size: 64px;
-}
-/* coloration */
-.container > div:nth-child(even) {
-  background-color: #87EA87;
-}
-
-.container > div:nth-child(odd) {
-  background-color: #87CCEA;
-}
-
- -

HTML

- -
<div class="container x mandatory-scroll-snapping" dir="ltr">
-  <div>X Mand. LTR </div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x proximity-scroll-snapping" dir="ltr">
-  <div>X Proximity LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y mandatory-scroll-snapping" dir="ltr">
-  <div>Y Mand. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y proximity-scroll-snapping" dir="ltr">
-  <div>Y Prox. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x mandatory-scroll-snapping" dir="rtl">
-  <div>X Mandatory RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x proximity-scroll-snapping" dir="rtl">
-  <div>X Proximity RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y mandatory-scroll-snapping" dir="rtl">
-  <div>Y Mand. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y proximity-scroll-snapping" dir="rtl">
-  <div>Y Prox. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
- -

{{EmbedLiveSample("Example", "100%", "1630")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.scroll-snap-stop")}}

diff --git a/files/ja/web/css/scroll-snap-stop/index.md b/files/ja/web/css/scroll-snap-stop/index.md new file mode 100644 index 0000000000..b9f4d8b80b --- /dev/null +++ b/files/ja/web/css/scroll-snap-stop/index.md @@ -0,0 +1,224 @@ +--- +title: scroll-snap-stop +slug: Web/CSS/scroll-snap-stop +tags: + - CSS + - CSS スクロールスナップ + - Reference + - scroll-snap-stop + - ウェブ +translation_of: Web/CSS/scroll-snap-stop +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の scroll-snap-stop プロパティは、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。

+ +
/* キーワード値 */
+scroll-snap-stop: normal;
+scroll-snap-stop: always;
+
+/* グローバル値 */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
normal
+
スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことがあります。
+
always
+
スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことはありません。最初の要素のスナップ位置にスナップします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。

+ +

CSS

+ +
/* setup */
+:root, body {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* definite scroll snap */
+.mandatory-scroll-snapping {
+  scroll-snap-stop: always;
+}
+.proximity-scroll-snapping {
+  scroll-snap-stop: normal;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container > div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container > div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container > div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 256px;
+}
+/* appearance fixes */
+.y.container > div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+
+ +

HTML

+ +
<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR </div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Proximity LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mandatory RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Proximity RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+ +

{{EmbedLiveSample("Example", "100%", "1630")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.properties.scroll-snap-stop")}}

-- cgit v1.2.3-54-g00ecf