From cd010dda140dbc3cc6aef4d130a8b79d84c5ee00 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Oct 2021 01:49:08 +0900 Subject: Web/CSS/overflow-anchor 以下を修正 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/24 時点の英語版に同期 --- .../guide_to_scroll_anchoring/index.md | 97 ++++++++++------------ files/ja/web/css/overflow-anchor/index.md | 85 ++++++++----------- 2 files changed, 79 insertions(+), 103 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md index 2a71ff016a..594cac97c7 100644 --- a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md +++ b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md @@ -3,92 +3,85 @@ title: スクロールアンカリングの紹介 slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring tags: - CSS - - Guide + - ガイド - overflow-anchor - - scroll anchoring - スクロールアンカリング translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring --- -
{{CSSRef}}
+{{CSSRef}} -

ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

+ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。 -

スクロールアンカリング (scroll anchoring) はブラウザーの機能で、ユーザーが既に文書の新しい部分にスクロールした後で、コンテンツが読み込まれたことでページ内容の移動が発生してしまう問題を解決するためのものです。

+スクロールアンカリング (scroll anchoring) はブラウザーの機能で、ユーザーが既に文書の新しい部分にスクロールした後で、コンテンツが読み込まれたことでページ内容の移動が発生してしまう問題を解決するためのものです。 -

どのように動作するか

+## どのように動作するか -

スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにも関わらず、ユーザーが見ていた個所が表示域に留まり続けます。

+スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにもかかわらず、ユーザーが見ていた個所が表示域に留まり続けます。 -

スクロールアンカリングを有効にするには

+## スクロールアンカリングを有効にするには -

何もする必要はありません。この機能は、対応しているブラウザーでは既定で有効になっています。ほとんどの場合において、スクロールを固定することは望み通りでしょう。 — コンテンツが急に移動してしまうのは、誰にとっても使い勝手が悪いものです。

+何もする必要はありません。この機能は、対応しているブラウザーでは既定で有効になっています。ほとんどの場合において、スクロールを固定することは望み通りでしょう。 — コンテンツが急に移動してしまうのは、誰にとっても使い勝手が悪いものです。 -

デバッグする必要がある場合

+## デバッグする必要がある場合 -

スクロールアンカリングを有効にしてページの動作がうまくいかない場合は、一部の scroll イベントリスナーがアンカーノードの動きを補うための余分なスクロールをうまく処理していないことが原因とかもしれません。

+スクロールアンカリングを有効にしてページの動作がうまくいかない場合は、一部の `scroll` イベントリスナーがアンカーノードの動きを補うための余分なスクロールをうまく処理していないことが原因かもしれません。 -

Firefox では about:config で layout.css.scroll-anchoring.enabled を false に変更してスクロールアンカリングを無効にすることで、問題が解決するかどうかを確認できます。

+Firefox では `about:config` で `layout.css.scroll-anchoring.enabled` を `false` に変更してスクロールアンカリングを無効にすることで、問題が解決するかどうかを確認できます。 -

解決した場合は、Firefox がアンカーとして使用しているノードを layout.css.scroll-anchoring.highlight スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。

+解決した場合は、Firefox がアンカーとして使用しているノードを `layout.css.scroll-anchoring.highlight` スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。 -

あるノードがアンカーとして適切でないと思われる場合は、以下のように {{cssxref("overflow-anchor")}} を使用してそのノードを除外することができます。

+あるノードがアンカーとして適切でないと思われる場合は、以下のように {{cssxref("overflow-anchor")}} を使用してそのノードを除外することができます。 -

無効にする必要がある場合は

+## 無効にする必要がある場合は -

仕様書では、新しいプロパティである {{cssxref("overflow-anchor")}} を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。

+仕様書では、新しいプロパティである {{cssxref("overflow-anchor")}} を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。 -

指定できる値は、 auto または none のどちらかです。

+指定できる値は、 `auto` または `none` のどちらかです。 - +- `auto` が初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。 +- `none` は、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。 -

文書全体でスクロールアンカリングを無効にするには、 {{htmlelement("body")}} 要素にプロパティを指定してください。。

+文書全体でスクロールアンカリングを無効にするには、{{htmlelement("body")}} 要素にこのプロパティを指定してください。 -
body {
+```css
+body {
   overflow-anchor: none;
-}
+} +``` -

文書の特定の部分でスクロールアンカリングを無効にしたい場合は、そのコンテンツを囲む要素に overflow-anchor: none を指定します。

+文書の特定の部分でスクロールアンカリングを無効にしたい場合は、そのコンテンツを囲む要素に `overflow-anchor: none` を指定してください。 -
.container {
+```css
+.container {
   overflow-anchor: none;
-}
+} +``` -
-

注: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。

-
+> **Note:** 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に `overflow-anchor: auto` を指定しても、その部分でスクロールアンカリングは動作しません。 -

抑制トリガー

+### 抑制トリガー -

仕様書では、問題になる可能性がある場合はその場でスクロールアンカリングを無効にする、抑制トリガー (suppression triggers) についても説明しています。スクロールアンカリングを指定したノードもしくはその祖先でトリガーが発生した場合、スクロールアンカリングが抑制されます。

+仕様書では、問題になる可能性がある場合はその場でスクロールアンカリングを無効にする、抑制トリガー (_suppression triggers_) についても説明しています。スクロールアンカリングを指定したノードもしくはその祖先でトリガーが発生した場合、スクロールアンカリングが抑制されます。 -

抑制トリガーとなるのは、次のプロパティの計算値 (computed value) が変更された場合です。

+抑制トリガーとなるのは、次のプロパティの計算値 (computed value) が変更された場合です。 - +- {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("bottom")}} +- {{cssxref("margin")}}, {{cssxref("padding")}} +- {{cssxref("width")}} もしくは {{cssxref("height")}} に関連するプロパティすべて +- {{cssxref("transform")}} -

さらに、スクロールボックス内の任意の場所で {{cssxref("position")}} を変更した場合もスクロールアンカリングが無効になります。

+さらに、スクロールボックス内の任意の場所で {{cssxref("position")}} を変更した場合もスクロールアンカリングが無効になります。 -
-

バグ {{bug(1584285)}} で、Firefox Nightly に layout.css.scroll-anchoring.suppressions.enabled フラグが追加され、これらのトリガーを無効化できるようになりました。

-
+> **Note:** バグ {{bug(1584285)}} で、Firefox Nightly に `layout.css.scroll-anchoring.suppressions.enabled` フラグが追加され、これらのトリガーを無効化できるようになりました。 -

その他の解説

+## その他の解説 - +- [Explainer document on the WICG site](https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md) +- [Scroll anchoring for web developers on the Chromium blog](https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html) +- [Implement a pin-to-bottom scrolling element using scroll anchoring](https://blog.eqrion.net/pin-to-bottom/) -

ブラウザーの互換性

+## ブラウザーの互換性 -

ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、特性クエリを使用して overflow-anchor プロパティに対応しているかどうかを検査してください。

+ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、[機能クエリー](/ja/docs/Web/CSS/@supports)を使用して `overflow-anchor` プロパティに対応しているかどうかを検査してください。 -

{{Compat("css.properties.overflow-anchor")}}

+{{Compat("css.properties.overflow-anchor")}} diff --git a/files/ja/web/css/overflow-anchor/index.md b/files/ja/web/css/overflow-anchor/index.md index f1f0efaf23..bc931c6275 100644 --- a/files/ja/web/css/overflow-anchor/index.md +++ b/files/ja/web/css/overflow-anchor/index.md @@ -3,85 +3,68 @@ title: overflow-anchor slug: Web/CSS/overflow-anchor tags: - CSS - - CSS Property - - CSS Scroll Anchoring - - CSS スクロールアンカリング - CSS プロパティ + - CSS スクロールアンカリング - Reference - - overflow-anchor - - スクロールアンカリング + - recipe:css-property +browser-compat: css.properties.overflow-anchor translation_of: Web/CSS/overflow-anchor --- -
{{CSSRef}}
+{{CSSRef}} -

overflow-anchor は CSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。

+**`overflow-anchor`** は [CSS](/ja/docs/Web/CSS) のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。 -

スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。

+スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overflow-anchor: auto;
 overflow-anchor: none;
 
 /* グローバル値 */
 overflow-anchor: inherit;
 overflow-anchor: initial;
+overflow-anchor: revert;
 overflow-anchor: unset;
-
+``` + +### 値 + +- `auto` + - : その要素は、スクロール位置を調整するときにアンカー候補になります。 +- `none` + - : その要素はアンカー候補として選択されません。 -

値

+## 公式定義 -
-
auto
-
その要素は、スクロール位置を調整するときにアンカー候補になります。
-
none
-
その要素はアンカー候補として選択されません。
-
+{{cssinfo}} -

形式文法

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

例

+## 例 -

文書内でスクロールアンカリングを抑止する場合は、 overflow-anchor プロパティを使用してください。

+### スクロールアンカリングを抑止 -
body {
+文書内でスクロールアンカリングを抑止する場合は、 `overflow-anchor` プロパティを使用してください。
+
+```css
+* {
   overflow-anchor: none;
 }
-
- - - -

仕様書

+``` - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}{{Spec2('CSS Scroll Anchoring')}}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.overflow-anchor")}}

+{{Compat}} -

関連項目

+## 関連情報 - +- [スクロールアンカリングの紹介](/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring) -- cgit v1.2.3-54-g00ecf