From 94e8f8c474d5a10be866af1bc2eb0dd515a7228f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 12 Oct 2021 01:31:31 +0900 Subject: CSS スクロールスナップに関するページを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - scroll-margin-block-end および scroll-margin-block-start は新規翻訳 - 「CSS スクロールスナップの基本概念」は新規翻訳 - それ以外は 2021/10/09 時点の英語版に同期 --- files/ja/web/css/scroll-padding/index.md | 91 ++++++++++++++------------------ 1 file changed, 39 insertions(+), 52 deletions(-) (limited to 'files/ja/web/css/scroll-padding/index.md') diff --git a/files/ja/web/css/scroll-padding/index.md b/files/ja/web/css/scroll-padding/index.md index 5de5104bbb..f329213d95 100644 --- a/files/ja/web/css/scroll-padding/index.md +++ b/files/ja/web/css/scroll-padding/index.md @@ -3,38 +3,36 @@ title: scroll-padding slug: Web/CSS/scroll-padding tags: - CSS - - CSS Property - - 'recipe:css-shorthand-property' + - CSS プロパティ + - recipe:css-shorthand-property - scroll-snap +browser-compat: css.properties.scroll-padding translation_of: Web/CSS/scroll-padding --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`scroll-padding`** は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。 -
{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}
+{{EmbedInteractiveExample("pages/css/scroll-padding.html")}} - +`scroll-padding-*` プロパティは、スクロールポートの*最適な表示領域*のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。 -

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

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

構成するプロパティ

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

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

+- {{CSSXref("scroll-padding-bottom")}} +- {{CSSXref("scroll-padding-left")}} +- {{CSSXref("scroll-padding-right")}} +- {{CSSXref("scroll-padding-top")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding: auto;
 
-/* <length> 値 */
+/*  値 */
 scroll-padding: 10px;
 scroll-padding: 1em .5em 1em 1em;
 scroll-padding: 10%;
@@ -42,45 +40,34 @@ scroll-padding: 10%;
 /* グローバル値 */
 scroll-padding: inherit;
 scroll-padding: initial;
+scroll-padding: revert;
 scroll-padding: unset;
-
+``` -

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{cssinfo}} -

形式文法

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

仕様書

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

ブラウザーの互換性

- -

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

+## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) -- cgit v1.2.3-54-g00ecf