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-block/index.md | 82 +++++++++++++------------- 1 file changed, 42 insertions(+), 40 deletions(-) (limited to 'files/ja/web/css/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 index 7a0916cbb3..9dda14bb19 100644 --- a/files/ja/web/css/scroll-padding-block/index.md +++ b/files/ja/web/css/scroll-padding-block/index.md @@ -3,28 +3,37 @@ title: scroll-padding-block slug: Web/CSS/scroll-padding-block tags: - CSS - - CSS Scroll Snap - - Property + - CSS スクロールスナップ - Reference - Web + - recipe:css-shorthand-property - scroll-padding - scroll-padding-block +browser-compat: css.properties.scroll-padding-block translation_of: Web/CSS/scroll-padding-block --- -
{{CSSRef}}
+{{CSSRef}} -

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

+`scroll-padding-block` は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のブロック軸のスクロールパディングを設定します。 -

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

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

{{cssinfo}}

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

構文

+## 構成要素のプロパティ -
/* キーワード値 */
+このプロパティは以下の CSS プロパティの一括指定です。
+
+- [`scroll-padding-block-end`](/ja/docs/Web/CSS/scroll-padding-block-end)
+- [`scroll-padding-block-start`](/ja/docs/Web/CSS/scroll-padding-block-start)
+
+## 構文
+
+```css
+/* キーワード値 */
 scroll-padding-block: auto;
 
-/* <length> 値 */
+/*  値 */
 scroll-padding-block: 10px;
 scroll-padding-block: 1em .5em;
 scroll-padding-block: 10%;
@@ -32,41 +41,34 @@ scroll-padding-block: 10%;
 /* グローバル値 */
 scroll-padding-block: inherit;
 scroll-padding-block: initial;
+scroll-padding-block: revert;
 scroll-padding-block: unset;
-
+``` + +### 値 + +- `` + - : スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ユーザーエージェントはゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。 -

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

形式文法

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

仕様書

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

ブラウザーの対応

- -

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

+## 仕様書 + +{{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