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 時点の英語版に同期 --- .../ja/web/css/scroll-padding-inline-end/index.md | 75 ++++++++++------------ 1 file changed, 33 insertions(+), 42 deletions(-) (limited to 'files/ja/web/css/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 index 5e977ca930..4bff47c185 100644 --- a/files/ja/web/css/scroll-padding-inline-end/index.md +++ b/files/ja/web/css/scroll-padding-inline-end/index.md @@ -3,29 +3,27 @@ title: scroll-padding-inline-end slug: Web/CSS/scroll-padding-inline-end tags: - CSS - - CSS Property - CSS プロパティ - Web + - recipe:css-property - scroll-padding-inline - scroll-padding-inline-end +browser-compat: css.properties.scroll-padding-inline-end translation_of: Web/CSS/scroll-padding-inline-end --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-inline-end: auto;
 
-/* <length> 値 */
+/*  値 */
 scroll-padding-inline-end: 10px;
 scroll-padding-inline-end: 1em;
 scroll-padding-inline-end: 10%;
@@ -33,41 +31,34 @@ scroll-padding-inline-end: 10%;
 /* グローバル値 */
 scroll-padding-inline-end: inherit;
 scroll-padding-inline-end: initial;
+scroll-padding-inline-end: revert;
 scroll-padding-inline-end: unset;
-
+``` + +### 値 -

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

形式文法

+{{cssinfo}} + +## 形式文法 {{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")}}

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